Java Reference
In-Depth Information
if (form.powers[i].checked) {
hero.powers.push(form.powers[i].value);
}
}
This creates a
powers
property for our
hero
object that starts as an empty array. We then
iterate over each checkbox to see if it was checked in the form. If it was, we add the
value
property of the checkbox to the
powers
array using the
push
method.
Note that a checkbox can be set to true using JavaScript by setting its
checked
property to
true
. For example, we could make the first checkbox in the list of powers appear checked
with this line of code:
document.forms.hero.powers[0].checked = true
Checkboxes can also be checked initially using the "
checked
" attribute in the HTML:
<input type="checkbox" value="Flight" name="powers"
checked>
Radio Button Input Fields
Radio buttons are created using input fields with
type="radio"
. Like checkboxes they
allow users to check an option as
true
, but they only give an exclusive choice of options,
so
only one option
can be selected.
This type of mutually exclusive option could be whether a superhero is a hero or a villain
... or even an antihero (you know, those ones that are unable to decide whether to be good
or bad). Add this line of code to the form in hero.htm:
<p>What type of hero are you?</p>
<label>Hero:</label>
<input type="radio" name="type" value="Hero">
<label>Villain:</label>
<input type="radio" name="type" value="Villain">
<label>Anti-Hero:</label>
<input type="radio" name="type" value="Antihero">
