JavaScript Bible, Gold Edition part 200 pptx

Checkbox Input Object Properties checked NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Example The simple example in Listing 24-2 passes a form object reference to the JavaScript function.

Trang 1

Checkbox Input Object Properties

checked

NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5

Example

The simple example in Listing 24-2 passes a form object reference to the JavaScript function The function, in turn, reads the checkedvalue of the form’s checkbox object (checkThis.checked) and uses its Boolean value as the test result for the

if elseconstruction.

Listing 24-2: The checked Property as a Conditional

<HTML>

<HEAD>

<TITLE>Checkbox Inspector</TITLE>

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

Trang 2

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

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 checkedproperty If the property is true(the button is checked),

the script sets the actionproperty 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

Trang 3

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 primaryURLor alternateURLdoesn’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>

function setAction(form) {

if (form.checkThis.checked) { form.action = form.checkThis.value } else {

form.action = “file://primaryURL”

} return true }

</SCRIPT>

</HEAD>

<BODY>

<INPUT TYPE=”checkbox” NAME=”checkThis” VALUE=”file://alternateURL”>Use alternate<P>

</FORM>

</BODY>

</HTML>

Event handlers

onClick

document.formObject.checkboxObject.onClick

Trang 4

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 elseshortcut construction

is used to convert the Boolean values of the checkedproperty to the strings

needed for the displaystyle 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

checkedproperty 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 listlist-ing to run in IE4 by

adapt-ing references to the document.allformat.

Listing 24-5: A Checkbox and an onClick event Handler

<HTML>

<HEAD>

<TITLE>Checkbox Event Handler</TITLE>

#monGroup {visibility:hidden}

#comGroup {visibility:hidden}

Continued

Note

Trang 5

Listing 24-5 (continued)

</STYLE>

// 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>

<TR>

<TD>

<INPUT TYPE=”checkbox” NAME=”monitor”

onClick=”toggle(this, ‘monGroup’)”>Monitor

</TD>

<TD>

<INPUT TYPE=”radio” NAME=”monitorType”>15”

<INPUT TYPE=”radio” NAME=”monitorType”>>21”

</SPAN>

</TD>

</TR>

<TR>

<TD>

<INPUT TYPE=”checkbox” NAME=”comms”

onClick=”toggle(this, ‘comGroup’)”>Communications

</TD>

<TD>

<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

Trang 6

<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>

<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

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 valueproperty 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.

Trang 7

Listing 24-6: Finding the Selected Button in a Radio Group

<HTML>

<HEAD>

<TITLE>Extracting Highlighted Radio Button</TITLE>

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

Trang 8

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 CHECKEDattribute 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

Example

See the loop construction within the function of Listing 24-7 for one way to apply

the lengthproperty.

Trang 9

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

Example

Every time a user clicks one of the radio buttons in Listing 24-8, he or she sets a global variable to trueor 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 onUnloadevent 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 onLoadso 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>

document.formObject.radioObject.onClick

Trang 10

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>

<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 onClickevent handlers for

radio buttons — this time to hide and show related items in a form.

Tiêu đề	Checkbox Input Object Properties
Trường học	Standard University
Chuyên ngành	Computer Science
Thể loại	Tài liệu
Năm xuất bản	2023
Thành phố	New York

Định dạng
Số trang	10
Dung lượng	132,84 KB