JavaScript Bible, Gold Edition part 200 pptx
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (132.84 KB, 10 trang )
CD-482
Part VI ✦ Appendixes
Checkbox Input Object
Properties
checked
NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5
Compatibility ✓✓✓ ✓ ✓ ✓✓✓✓
Example
The simple example in Listing 24-2 passes a form object reference to the JavaScript
function. The function, in turn, reads the
checked value of the form’s checkbox
object (
checkThis.checked) and uses its Boolean value as the test result for the
if else construction.
Listing 24-2: The checked Property as a Conditional
<HTML>
<HEAD>
<TITLE>Checkbox Inspector</TITLE>
<SCRIPT LANGUAGE=”JavaScript”>
function inspectBox(form) {
if (form.checkThis.checked) {
alert(“The box is checked.”)
} else {
alert(“The box is not checked at the moment.”)
}
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE=”checkbox” NAME=”checkThis”>Check here<P>
<INPUT TYPE=”button” NAME=”boxChecker” VALUE=”Inspect Box”
onClick=”inspectBox(this.form)”>
</FORM>
</BODY>
</HTML>
document.formObject.checkboxObject.checked
CD-483
Appendix F ✦ Examples from Parts III and IV
defaultChecked
NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5
Compatibility ✓✓✓ ✓ ✓ ✓✓✓✓
Example
The function in Listing 24-3 (this fragment is not in the CD-ROM listings) is designed
to compare the current setting of a checkbox against its default value. The
if con-
struction compares the current status of the box against its default status. Both are
Boolean values, so they can be compared against each other. If the current and
default settings don’t match, the function goes on to handle the case in which the
current setting is other than the default.
Listing 24-3: Examining the defaultChecked Property
function compareBrowser(thisBox) {
if (thisBox.checked != thisBox.defaultChecked) {
// statements about using a different set of HTML pages
}
}
value
NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5
Compatibility ✓✓✓ ✓ ✓ ✓✓✓✓
Example
The scenario for the skeleton HTML page in Listing 24-4 is a form with a checkbox
whose selection determines which of two actions to follow for submission to the
server. After the user clicks the Submit button, a JavaScript function examines
the checkbox’s
checked property. If the property is true (the button is checked),
the script sets the
action property for the entire form to the content of the value
property — thus influencing where the form goes on the server side. If you try this
document.formObject.checkboxObject.value
CD-484
Part VI ✦ Appendixes
listing on your computer, the result you see varies widely with the browser version
you use. For most browsers, you see some indication (an error alert or other screen
notation) that a file with the name
primaryURL or alternateURL doesn’t exist.
Unfortunately, IE5.5/Windows does not display the name of the file that can’t be
opened. Try the example in another browser if you have one. The names and the
error message come from the submission process for this demonstration.
Listing 24-4: Adjusting a CGI Submission Action
<HTML>
<HEAD>
<TITLE>Checkbox Submission</TITLE>
<SCRIPT LANGUAGE=”JavaScript”>
function setAction(form) {
if (form.checkThis.checked) {
form.action = form.checkThis.value
} else {
form.action = “file://primaryURL”
}
return true
}
</SCRIPT>
</HEAD>
<BODY>
<FORM METHOD=”POST” ACTION=””>
<INPUT TYPE=”checkbox” NAME=”checkThis” VALUE=”file://alternateURL”>Use
alternate<P>
<INPUT TYPE=”submit” NAME=”boxChecker” onClick=”return setAction(this.form)”>
</FORM>
</BODY>
</HTML>
Event handlers
onClick
NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5
Compatibility ✓✓✓ ✓ ✓ ✓✓✓✓
document.formObject.checkboxObject.onClick
CD-485
Appendix F ✦ Examples from Parts III and IV
Example
The page in Listing 24-5 shows how to trap the click event in one checkbox to influ-
ence the visibility and display of other form controls. After you turn on the Monitor
checkbox, a list of radio buttons for monitor sizes appears. Similarly, engaging the
Communications checkbox makes two radio buttons visible. Your choice of radio
button brings up one of two further choices within the same table cell.
Notice how the
toggle() function was written as a generalizable function. This func-
tion can accept a reference to any checkbox object and any related span. If five more
groups like this were added to the table, no additional functions would be needed.
In the
swap() function, an application of a nested if else shortcut construction
is used to convert the Boolean values of the
checked property to the strings
needed for the
display style property. The nesting is used to allow a single state-
ment to take care of two conditions: the group of buttons to be controlled and the
checked property of the button invoking the function. This function is not general-
izable, because it contains explicit references to objects in the document. The
swap() function can be made generalizable, but due to the special relationships
between pairs of span elements (meaning one has to be hidden while the other dis-
played in its place), the function would require more parameters to fill in the blanks
where explicit references are needed.
A rendering bug in NN6 causes the form controls in the lower right frame to lose
their settings when the elements have their display style property set to none.
The problem is related to the inclusion of P or similar block elements inside a
table cell that contains controls. Therefore, if you uncheck and recheck the
Communications checkbox in the example page, the previously displayed sub-
group shows up even though no radio buttons are selected. You can script around
this bug by preserving radio button settings in a global variable as you hide the
group, and restoring the settings when you show the group again.
Syntax used to address elements here is the W3C DOM-compatible form, so this list-
ing runs as is with IE5+ and NN6+. You can modify the listing to run in IE4 by adapt-
ing references to the
document.all format.
Listing 24-5: A Checkbox and an onClick event Handler
<HTML>
<HEAD>
<TITLE>Checkbox Event Handler</TITLE>
<STYLE TYPE=”text/css”>
#monGroup {visibility:hidden}
#comGroup {visibility:hidden}
Continued
Note
document.formObject.checkboxObject.onClick
CD-486
Part VI ✦ Appendixes
Listing 24-5 (continued)
</STYLE>
<SCRIPT LANGUAGE=”JavaScript”>
// toggle visibility of a main group spans
function toggle(chkbox, group) {
var visSetting = (chkbox.checked) ? “visible” : “hidden”
document.getElementById(group).style.visibility = visSetting
}
// swap display of communications sub group spans
function swap(radBtn, group) {
var modemsVisSetting = (group == “modems”) ?
((radBtn.checked) ? “” : “none”) : “none”
var netwksVisSetting = (group == “netwks”) ?
((radBtn.checked) ? “” : “none”) : “none”
document.getElementById(“modems”).style.display = modemsVisSetting
document.getElementById(“netwks”).style.display = netwksVisSetting
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<H3>Check all accessories for your computer:</H3>
<TABLE BORDER=2 CELLPADDING=5>
<TR>
<TD>
<INPUT TYPE=”checkbox” NAME=”monitor”
onClick=”toggle(this, ‘monGroup’)”>Monitor
</TD>
<TD>
<SPAN ID=”monGroup”>
<INPUT TYPE=”radio” NAME=”monitorType”>15”
<INPUT TYPE=”radio” NAME=”monitorType”>17”
<INPUT TYPE=”radio” NAME=”monitorType”>21”
<INPUT TYPE=”radio” NAME=”monitorType”>>21”
</SPAN>
</TD>
</TR>
<TR>
<TD>
<INPUT TYPE=”checkbox” NAME=”comms”
onClick=”toggle(this, ‘comGroup’)”>Communications
</TD>
<TD>
<SPAN ID=”comGroup”>
<P><INPUT TYPE=”radio” NAME=”commType”
onClick=”swap(this, ‘modems’)”>Modem
<INPUT TYPE=”radio” NAME=”commType”
onClick=”swap(this, ‘netwks’)”>Network</P>
document.formObject.checkboxObject.onClick
CD-487
Appendix F ✦ Examples from Parts III and IV
<P><SPAN ID=”modems” STYLE=”display:none”>
<INPUT TYPE=”radio” NAME=”modemType”><56kbps
<INPUT TYPE=”radio” NAME=”modemType”>56kbps
<INPUT TYPE=”radio” NAME=”modemType”>ISDN (any speed)
<INPUT TYPE=”radio” NAME=”modemType”>Cable
</SPAN>
<SPAN ID=”netwks” STYLE=”display:none”>
<INPUT TYPE=”radio” NAME=”netwkType”>Ethernet 10Mbps (10-Base T)
<INPUT TYPE=”radio” NAME=”netwkType”>Ethernet 100Mbps (10/100)
<INPUT TYPE=”radio” NAME=”netwkType”>T1 or greater
</SPAN> </P>
</SPAN>
</TD>
</TR>
</TABLE>
</FORM>
</BODY>
</HTML>
Radio Input Object
Properties
checked
NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5
Compatibility ✓✓✓ ✓ ✓ ✓✓✓✓
Example
Listing 24-6 uses a repeat loop in a function to look through all buttons in the
Stooges group in search of the checked button. After the loop finds the one whose
checked property is
true, it returns the value of the index. In one instance, that
index value is used to extract the
value property for display in the alert dialog box;
in the other instance, the value helps determine which button in the group is next
in line to have its checked property set to
true.
document.formObject.radioObject.checked
CD-488
Part VI ✦ Appendixes
Listing 24-6: Finding the Selected Button in a Radio Group
<HTML>
<HEAD>
<TITLE>Extracting Highlighted Radio Button</TITLE>
<SCRIPT LANGUAGE=”JavaScript”>
function getSelectedButton(buttonGroup){
for (var i = 0; i < buttonGroup.length; i++) {
if (buttonGroup[i].checked) {
return i
}
}
return 0
}
function fullName(form) {
var i = getSelectedButton(form.stooges)
alert(“You chose “ + form.stooges[i].value + “.”)
}
function cycle(form) {
var i = getSelectedButton(form.stooges)
if (i+1 == form.stooges.length) {
form.stooges[0].checked = true
} else {
form.stooges[i+1].checked = true
}
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<B>Select your favorite Stooge:</B>
<P><INPUT TYPE=”radio” NAME=”stooges” VALUE=”Moe Howard” CHECKED>Moe
<INPUT TYPE=”radio” NAME=”stooges” VALUE=”Larry Fine” >Larry
<INPUT TYPE=”radio” NAME=”stooges” VALUE=”Curly Howard” >Curly
<INPUT TYPE=”radio” NAME=”stooges” VALUE=”Shemp Howard” >Shemp</P>
<P><INPUT TYPE=”button” NAME=”Viewer” VALUE=”View Full Name ”
onClick=”fullName(this.form)”></P>
<P><INPUT TYPE=”button” NAME=”Cycler” VALUE=”Cycle Buttons”
onClick=”cycle(this.form)”> </P>
</FORM>
</BODY>
</HTML>
document.formObject.radioObject.checked
CD-489
Appendix F ✦ Examples from Parts III and IV
defaultChecked
NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5
Compatibility ✓✓✓ ✓ ✓ ✓✓✓✓
Example
In the script fragment of Listing 24-7 (not among the CD-ROM files), a function is
passed a reference to a form containing the Stooges radio buttons. The goal is to
see, in as general a way as possible (supplying the radio group name where
needed), if the user changed the default setting. Looping through each of the radio
buttons, you look for the one whose
CHECKED attribute is set in the <INPUT> defini-
tion. With that index value (
i) in hand, you then look to see if that entry is still
checked. If not (notice the
! negation operator), you display an alert dialog box
about the change.
Listing 24-7: Has a Radio Button Changed?
function groupChanged(form) {
for (var i = 0; i < form.stooges.length; i++) {
if (form.stooges[i].defaultChecked) {
if (!form.stooges[i].checked) {
alert(“This radio group has been changed.”)
}
}
}
}
length
NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5
Compatibility ✓✓✓ ✓ ✓ ✓✓✓✓
Example
See the loop construction within the function of Listing 24-7 for one way to apply
the
length property.
document.formObject.radioObject.length
CD-490
Part VI ✦ Appendixes
value
NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5
Compatibility ✓✓✓ ✓ ✓ ✓✓✓✓
Example
Listing 24-6 earlier in this chapter demonstrates how a function extracts the value
property of a radio button to display otherwise hidden information stored with a
button. In this case, it lets the alert dialog box show the full name of the selected
Stooge.
Event handlers
onClick
NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5
Compatibility ✓✓✓ ✓ ✓ ✓✓✓✓
Example
Every time a user clicks one of the radio buttons in Listing 24-8, he or she sets a
global variable to
true or false, depending on whether the person is a Shemp
lover. This action is independent of the action that is taking place if the user clicks
on the View Full Name button. An
onUnload event handler in the <BODY> definition
triggers a function that displays a message to Shemp lovers just before the page
clears (click the browser’s Reload button to leave the current page prior to reload-
ing). Here I use an initialize function triggered by
onLoad so that the current radio
button selection sets the global value upon a reload.
Listing 24-8: An onClick event Handler for Radio Buttons
<HTML>
<HEAD>
<TITLE>Radio Button onClick Handler</TITLE>
<SCRIPT LANGUAGE=”JavaScript”>
document.formObject.radioObject.onClick
CD-491
Appendix F ✦ Examples from Parts III and IV
var ShempOPhile = false
function initValue() {
ShempOPhile = document.forms[0].stooges[3].checked
}
function fullName(form) {
for (var i = 0; i < form.stooges.length; i++) {
if (form.stooges[i].checked) {
break
}
}
alert(“You chose “ + form.stooges[i].value + “.”)
}
function setShemp(setting) {
ShempOPhile = setting
}
function exitMsg() {
if (ShempOPhile) {
alert(“You like SHEMP?”)
}
}
</SCRIPT>
</HEAD>
<BODY onLoad=”initValue()” onUnload=”exitMsg()”>
<FORM>
<B>Select your favorite Stooge:</B><P>
<INPUT TYPE=”radio” NAME=”stooges” VALUE=”Moe Howard” CHECKED
onClick=”setShemp(false)”>Moe
<INPUT TYPE=”radio” NAME=”stooges” VALUE=”Larry Fine”
onClick=”setShemp(false)”>Larry
<INPUT TYPE=”radio” NAME=”stooges” VALUE=”Curly Howard”
onClick=”setShemp(false)”>Curly
<INPUT TYPE=”radio” NAME=”stooges” VALUE=”Shemp Howard”
onClick=”setShemp(true)”>Shemp<P>
<INPUT TYPE=”button” NAME=”Viewer” VALUE=”View Full Name ”
onClick=”fullName(this.form)”>
</FORM>
</BODY>
</HTML>
See also Listing 24-5 for further examples of scripting onClick event handlers for
radio buttons — this time to hide and show related items in a form.
document.formObject.radioObject.onClick
