Online Documentation Server
 ÏÎÈÑÊ
ods.com.ua Web
 ÊÀÒÅÃÎÐÈÈ
Home
Programming
Net technology
Unixes
Security
RFC, HOWTO
Web technology
Data bases
Other docs

 


 ÏÎÄÏÈÑÊÀ

 Î ÊÎÏÈÐÀÉÒÀÕ
Âñÿ ïðåäîñòàâëåííàÿ íà ýòîì ñåðâåðå èíôîðìàöèÿ ñîáðàíà íàìè èç ðàçíûõ èñòî÷íèêîâ. Åñëè Âàì êàæåòñÿ, ÷òî ïóáëèêàöèÿ êàêèõ-òî äîêóìåíòîâ íàðóøàåò ÷üè-ëèáî àâòîðñêèå ïðàâà, ñîîáùèòå íàì îá ýòîì.




Previous Table of Contents Next

Properties

checked

The check box’s Boolean property checked reflects the button’s current state. A true value means that the specified check box is checked, whereas a false one represents an unchecked box. Of the properties supported by the checkbox object, this property is both the simplest and the most useful. You can read and adjust this property at any time, even after layout has been completed.

Checking and unchecking a check box is accomplished by simply assigning the corresponding Boolean value to the object’s checked property. The following statement unchecks a box:

document.forms[0].elements[0].checked = false

Since a check box can be set to any of the two possible states regardless of the current one, you do not have to use an if statement to determine the current state and then invoke the action accordingly. Be aware that setting the state of a check box by assigning checked is much more efficient than probing the current state and calling the check box’s click() method.

Example 22-7 demonstrates the use of the checked property in a simple game. It features both reading the checked property as well as setting it. The objective of the game is to check as many boxes as possible within 20 seconds (20,000 milliseconds). The accumulated number of currently checked boxes is displayed in a text object at the top. When time is over, all check boxes become read-only, and a start button is placed at the bottom for restarting the game.

<HTML>
<HEAD>
<TITLE>Checkbox game</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--

// assign initial values to global variables
var total = 0
var play = false

// react to a click in a checkbox
// (element == clicked checkbox object)
function display(element) {
// assign instance of Date object representing current time
 var now = new Date()

 // if the game has not started yet
 if (!play) {
// game starts now
play = true

// milliseconds since 1970 for time at beginning
startTime = now.getTime()
 }

// if more than 20 seconds have passed since startTime was last set
 if (now.getTime() – startTime > 20000) {
// reject modification (make "read-only")
element.checked = !element.checked

// terminate function
return
 }

 // if the clicked check box is now checked
 if (element.checked)
// increment total
total++
 else
// decrement total
total--

 // display total in text object
 element.form.num.value = total
}

function restart(form) {
 // set global variables back to initial values
 total = 0
 play = false

 // uncheck all 100 check boxes
 for (var i = 1; i <= 100; ++i) {
   // uncheck current check box
   form.elements[i].checked = false
 }
}

// -->
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--

// immediate script (executed before the other script because it
   is deferred)
document.write("<FORM><CENTER>")
document.write('<INPUT TYPE="text" VALUE="0"
NAME="num" SIZE=10 onFocus="this.blur()"><BR>')
document.write("<HR SIZE=1 WIDTH=40%>")

// use loop to create a 10 x 10 square of check boxes
for (var i = 0; i < 10; ++i) {
   for (var j = 0; j < 10; ++j) {
// write check box with "display(this)" as event handler script
document.write('<INPUT TYPE="checkbox" onClick=
  "display(this)">')
 }
 document.write("<BR>")
}

document.write("<HR SIZE=1 WIDTH=40%>")

// create button to call restart function to restart game
document.write('<INPUT TYPE="button"
VALUE="restart" onClick="restart(this.form)">')

document.write("</CENTER></FORM>")

// -->
</SCRIPT>
</BODY>
</HTML>

Example 22-7. A game demonstrating the use of check boxes.

The global statements in the <HEAD>…</HEAD> portion define the variable total that holds the accumulated number of checked check boxes and the variable play that holds a Boolean indication as to whether the game is currently being played (timer is running) or not.

Since its statements are all immediate ones, the first script segment to be executed is the one within the <BODY>…</BODY> portion of the page. That script simply prints the HTML interface of the game: a text

object, 100 check boxes, a button, and two horizontal rules. All check boxes have an onClick event handler that calls the display() function with the checkbox object itself (this) as an argument.

The display() function accepts one argument—the triggered checkbox object. First, an instance of the Date object, representing the time at which the display() function was called, is assigned to the local variable now. The next segment of the function checks if the game is already being played. If not, play is set to true and the number of milliseconds since 1970 is assigned to the global variable startTime. If the difference between the current time and that at the beginning of the game is greater than 20 seconds, the property checked of the calling checkbox is reversed (rejecting user’s attempts to continue playing after time is out), and the function terminates immediately. The rest of the function deals with a normal event of the user clicking the check box. The total number of checkboxes is incremented if the calling check box is currently checked, and is decremented if the check box is currently unchecked. The total number of checked check boxes is assigned to element.form.num.value, the text object’s value property.

The restart() function simply resets all global variables and checkbox states to their initial settings.


Note:  Instead of using the click() method to restrict modification of a check box, you should simply return the box’s state to its previous one. That is, set it to true if it was false and vice versa. A general “read-only” check box uses the following syntax:

<INPUT TYPE="checkbox" onClick="this.checked = !this.checked">


defaultChecked

A check box definition may include a CHECKED specification to signal that the default state of the check box is “on,” or true. If you do not specify this HTML attribute, it defaults to false. You can access a check box’s default state via JavaScript’s defaultCheck property. You can set defaultCheck at any time, thus overriding the CHECKEDattribute. Use the following statement to reset a check box’s state to its default:

this.checked = this.defaultChecked

this is the specific check box you want to reset.

Previous Table of Contents Next


With any suggestions or questions please feel free to contact us