Thông tin tài liệu
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 . {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. 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. 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()
Ngày đăng: 06/07/2014, 06:20
Xem thêm: JavaScript Bible, Gold Edition part 200 pptx, JavaScript Bible, Gold Edition part 200 pptx
