http://wbex.ru/index.php?action=history&feed=atom&title=JavaScript_DHTML%2FForm_Control%2FCheckBox
JavaScript DHTML/Form Control/CheckBox - История изменений
2026-04-04T08:02:18Z
История изменений этой страницы в вики
MediaWiki 1.30.0
http://wbex.ru/index.php?title=JavaScript_DHTML/Form_Control/CheckBox&diff=2500&oldid=prev
в 09:59, 26 мая 2010
2010-05-26T09:59:59Z
<p></p>
<table class="diff diff-contentalign-left" data-mw="interface">
<tr style="vertical-align: top;" lang="ru">
<td colspan="1" style="background-color: white; color:black; text-align: center;">← Предыдущая</td>
<td colspan="1" style="background-color: white; color:black; text-align: center;">Версия 09:59, 26 мая 2010</td>
</tr><tr><td colspan="2" style="text-align: center;" lang="ru"><div class="mw-diff-empty">(нет различий)</div>
</td></tr></table>
http://wbex.ru/index.php?title=JavaScript_DHTML/Form_Control/CheckBox&diff=2501&oldid=prev
Admin: 1 версия
2010-05-26T07:21:44Z
<p>1 версия</p>
<p><b>Новая страница</b></p><div>==A Checkbox and an onclick Event Handler==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html> <br />
<head> <br />
<title>Checkbox Event Handler</title> <br />
<style type="text/css"> <br />
#myGroup {visibility:hidden} <br />
</style> <br />
<script type="text/javascript"> <br />
function toggle(chkbox, group) { <br />
var visSetting = (chkbox.checked) ? "visible" : "hidden"; <br />
document.getElementById(group).style.visibility = visSetting; <br />
} <br />
function swap(radBtn, group) { <br />
var modemsVisSetting = (group == "modems") ? ((radBtn.checked) ? "" : "none") : "none"; <br />
document.getElementById("modems").style.display = modemsVisSetting; <br />
} <br />
</script> <br />
</head> <br />
<body> <br />
<form> <br />
<input type="checkbox" name="monitor" onclick="toggle(this, "myGroup")" />Monitor<br />
<span id="myGroup"><br />
<input type="radio" />15" <br />
</span><br />
</form> <br />
</body> <br />
</html> <br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==A Checkbox, an onclick Event Handler and show/hide form controls==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html> <br />
<head> <br />
<title>Checkbox Event Handler</title> <br />
<style type="text/css"> <br />
#myGroup {visibility:hidden} <br />
</style> <br />
<script type="text/javascript"> <br />
function toggle(chkbox, group) { <br />
var visSetting = (chkbox.checked) ? "visible" : "hidden"; <br />
document.getElementById(group).style.visibility = visSetting; <br />
} <br />
function swap(radBtn, group) { <br />
var modemsVisSetting = (group == "modems") ? ((radBtn.checked) ? "" : "none") : "none"; <br />
document.getElementById("modems").style.display = modemsVisSetting; <br />
} <br />
</script> <br />
</head> <br />
<body> <br />
<form> <br />
<input type="checkbox" name="monitor" onclick="toggle(this, "myGroup")" />Monitor<br />
<span id="myGroup"><br />
<input type="radio" />15" <br />
</span><br />
</form> <br />
</body> <br />
</html> <br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Call "click()" to triger event==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<html><br />
<body><br />
<script language="JavaScript"><br />
function function1() {<br />
myCheckbox.focus(); <br />
myCheckbox.click();<br />
}<br />
</script><br />
<input type="checkbox" id="myCheckbox" value="checkbox"><br />
<button onclick="function1();">Click the checkbox</button><br />
</body><br />
</html><br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Check a CheckBox==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<title>A sample document</title><br />
</head><br />
<body bgcolor="White"><br />
<form><br />
<input type="checkbox" checked name="cb1">Item 1<br />
</form><br />
</body><br />
</html><br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Check and uncheck a checkbox==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<script type="text/javascript"><br />
function check(){<br />
var x=document.forms.myForm<br />
x[0].checked=true<br />
}<br />
function uncheck(){<br />
var x=document.forms.myForm<br />
x[0].checked=false<br />
}<br />
</script><br />
</head><br />
<body><br />
<form name="myForm"><br />
<input type="checkbox" value="on"><br />
<input type="button" onclick="check()" value="Check Checkbox"><br />
<input type="button" onclick="uncheck()" value="Uncheck Checkbox"><br />
</form><br />
</body><br />
</html><br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Checkbox Action==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<html><br />
<body><br />
<script type="text/javascript"><br />
function convertField(field){<br />
if (document.form1.convertUpper.checked){<br />
field.value=field.value.toUpperCase()<br />
}<br />
}<br />
function convertAllFields(){<br />
document.form1.fname.value=document.form1.fname.value.toUpperCase()<br />
document.form1.lname.value=document.form1.lname.value.toUpperCase()<br />
}<br />
</script><br />
<form name="form1"><br />
First name: <br />
<input type="text" name="fname" onChange="convertField(this)" size="20" /><br />
<br><br />
Last name: <br />
<input type="text" name="lname" onChange="convertField(this)" size="20" /><br />
<br><br />
Convert fields to upper case <br />
<input type="checkBox" name="convertUpper" <br />
onClick="if (this.checked) {convertAllFields()}" value="ON"><br />
</form><br />
</body><br />
</html><br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==CheckBox check action==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<script language="JavaScript"><br />
<!--<br />
function checkb1() { <br />
alert("You clicked on checkbox 1"); <br />
}<br />
function checkb2() { <br />
alert("You clicked on checkbox 2"); <br />
}<br />
function checkb3() { <br />
alert("You clicked on checkbox 3"); <br />
}<br />
//--><br />
</script><br />
</head><br />
<body><br />
<form><br />
<input type="checkbox" onClick="checkb1()">A<br><br />
<input type="checkbox" onClick="checkb2()">B<br><br />
<input type="checkbox" onClick="checkb3()">C<br />
</form><br />
</body><br />
</html><br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Checkboxes in a form==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<script type="text/javascript"><br />
function check(){<br />
coffee=document.forms[0].coffee<br />
answer=document.forms[0].answer<br />
txt=""<br />
for (i=0;i<coffee.length;++ i){<br />
if (coffee[i].checked){<br />
txt=txt + coffee[i].value + " "<br />
}<br />
}<br />
answer.value="You ordered a coffee with " + txt<br />
}<br />
</script><br />
</head><br />
<body><br />
<form><br />
How would you like your coffee?<br><br><br />
<input type="checkbox" name="coffee" value="cream">With cream<br><br />
<input type="checkbox" name="coffee" value="sugar">With sugar<br><br />
<br><br />
<input type="button" name="test" onclick="check()" value="Send order"><br />
<br><br />
<br><br />
<input type="text" name="answer" size="50"><br />
</form><br />
</body><br />
</html><br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Checkbox in a form==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<script type="text/javascript"><br />
function check(){<br />
coffee=document.forms[0].coffee<br />
answer=document.forms[0].answer<br />
txt=""<br />
for (i=0;i<coffee.length;++ i){<br />
if (coffee[i].checked){<br />
txt=txt + coffee[i].value + " "<br />
}<br />
}<br />
answer.value="You ordered a coffee with " + txt<br />
}<br />
</script><br />
</head><br />
<body><br />
<form><br />
How would you like your coffee?<br><br />
<input type="checkbox" name="coffee" value="cream">With cream<br><br />
<input type="checkbox" name="coffee" value="sugar">With sugar<br><br />
<br><br />
<input type="button" name="test" onclick="check()" value="Send order"><br />
<br><br />
<input type="text" name="answer" size="50"><br />
</form><br />
</body><br />
</html><br />
<br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Check status Example==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<html><br />
<head><br />
<script language="JavaScript"><br />
function function2() {<br />
var m = document.all.myRadioButton.status; <br />
alert(m);<br />
}<br />
function function3() {<br />
var m = document.all.myCheckBox.status; <br />
alert(m);<br />
}<br />
</script><br />
</head><br />
<body><br />
<input type="radio" id="myRadioButton" checked>Radio<br />
<input type="button" value="Check Status" onclick="function2();"><br />
<input type="checkbox" id="myCheckBox">Checkbox<br />
<input type="button" value="Check Status" onclick="function3();"><br />
</body><br />
</html><br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Determining Whether a Checkbox Object Is Checked==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<title>Online Registration</title><br />
<SCRIPT LANGUAGE="JavaScript"><br />
function selectText(currentObject) {<br />
if (document.form1.selectBox.checked) {<br />
currentObject.select()<br />
}<br />
}<br />
</SCRIPT><br />
</head><br />
<body><br />
<form name="form1" method="POST"><br />
<h2>Online Registration</h2><br />
<p>Username:<br><br />
<input type=text size=25 maxlength=256 name="Username" onFocus="selectText(this)"><br />
<br>Browser used:<br><br />
<input type=text size=25 maxlength=256 name="Browser" onFocus="selectText(this)"><br />
<br><br />
Email address:<strong> <br><br />
</strong><br />
<input type=text size=25 maxlength=256 name="EmailAddress" onFocus="selectText(this)"><br />
</p><br />
<br />
<h2><br />
<input type=submit value="Register"> <br />
<input type=reset value="Clear"><br />
</h2><br />
<p><br />
<input type=checkbox name="selectBox">Activate field selection.<br />
</form><br />
</body><br />
</html><br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Get value from check box==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<script><br />
function processMusic(){<br />
document.myForm.txtOutput.value = "";<br />
<br />
if (document.myForm.chkCountry.checked == true){<br />
document.myForm.txtOutput.value += "You like ";<br />
document.myForm.txtOutput.value += document.myForm.chkCountry.value;<br />
document.myForm.txtOutput.value += "\n";<br />
}<br />
}<br />
</script><br />
</head><br />
<body><br />
Music Chooser<br />
<form name = myForm><br />
<input type = "checkbox" name = "chkCountry" value = "country">country<br />
<textarea name = "txtOutput"<br />
rows = 10<br />
cols = 35><br />
</textarea><br />
</form><br />
</body><br />
</html><br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
=="indeterminate" Example==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<html><br />
<body><br />
<input type="checkbox" id="myCheckBox" value="checkbox" checked><br />
Indeterminate = true.<br />
<input type="button" value="Checkbox state" onClick="function1();"><br />
<script language="JavaScript"><br />
document.all.myCheckBox.indeterminate = true;<br />
function function1() {<br />
var m = document.all.myCheckBox.indeterminate;<br />
alert("Indeterminate: "+m); <br />
} <br />
</script><br />
</body><br />
</html><br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Is checked==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<script language="JavaScript"><br />
<!--<br />
function cb1(f) {<br />
if (f.checked) {<br />
alert("Checkbox 1 is checked");<br />
}<br />
}<br />
function cb2(f) {<br />
if (f.checked) {<br />
alert("Checkbox 2 is checked");<br />
}<br />
}<br />
//--><br />
</script><br />
</head><br />
<body><br />
<form name="checkForm"><br />
<input type="checkbox" checked name="c1" onClick="cb1(this.form.c1)">Item 1<br><br />
<input type="checkbox" name="c2" onClick="cb2(this.form.c2)">Item 2<br />
</form><br />
</body><br />
</html><br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
== Methods and Properties of the Checkbox Object==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
Method<br />
+-----------+----------+----------------------------------------------------+ <br />
blur() Removes focus from the check box.<br />
+-----------+----------+----------------------------------------------------+ <br />
click() Calls the check box"s onClick event handler.<br />
+-----------+----------+----------------------------------------------------+ <br />
focus() Applies focus to this check box.<br />
+-----------+----------+----------------------------------------------------+ <br />
handleEvent() Passes an event to the appropriate event handler <br />
associated with the check box.<br />
+-----------+----------+----------------------------------------------------+ <br />
Property<br />
+-----------+----------+----------------------------------------------------+ <br />
checked Returns a Boolean value that determines if the <br />
check box is checked.<br />
+-----------+----------+----------------------------------------------------+ <br />
defaultChecked Returns a Boolean value that holds the initial <br />
state of the check box. This value is set with the <br />
checked attribute.<br />
+-----------+----------+----------------------------------------------------+ <br />
form Returns the Form object of the check box.<br />
+-----------+----------+----------------------------------------------------+ <br />
name Returns a string that is specified in the name <br />
attribute of the HTML "input" tag.<br />
+-----------+----------+----------------------------------------------------+ <br />
type Returns a string that is specified in the type <br />
attribute of the HTML "input" tag. This string is <br />
always checkbox for the Checkbox object.<br />
+-----------+----------+----------------------------------------------------+ <br />
value Returns a value returned when the form is submitted.<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==The Checkbox Object"s checked Property==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<HTML><br />
<HEAD><br />
<TITLE>Checkbox Inspector</TITLE><br />
<SCRIPT LANGUAGE="JavaScript"><br />
function myFunction() {<br />
if (document.forms[0].checkThis.checked) {<br />
alert("The box is checked.")<br />
} else {<br />
alert("The box is not checked at the moment.")<br />
}<br />
}<br />
</SCRIPT><br />
</HEAD><br />
<BODY><br />
<FORM><br />
<INPUT TYPE="checkbox" NAME="checkThis">Check here<BR><br />
<INPUT TYPE="button" VALUE="Inspect Box" onClick="myFunction()"><br />
</FORM><br />
</BODY><br />
</HTML><br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==The checked Property as a Conditional==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<HTML><br />
<HEAD><br />
<TITLE>Checkbox Inspector</TITLE><br />
<SCRIPT LANGUAGE="JavaScript"><br />
function myFunction(form) {<br />
if (form.checkThis.checked) {<br />
alert("The box is checked.")<br />
} else {<br />
alert("The box is not checked at the moment.")<br />
}<br />
}<br />
</SCRIPT><br />
</HEAD><br />
<BODY><br />
<FORM><br />
<INPUT TYPE="checkbox" NAME="checkThis">Check here<P><br />
<INPUT TYPE="button" NAME="boxChecker" VALUE="Inspect Box"<br />
onClick="myFunction(this.form)"><br />
</FORM><br />
</BODY><br />
</HTML><br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Using the HTML Form Elements Array==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<HTML><br />
<HEAD><br />
<TITLE>Elements </TITLE><br />
</HEAD><br />
<BODY><br />
<SCRIPT> <br />
function uClicked (theBox){ <br />
if (!theBox.checked) <br />
alert ("You unchecked the box."); <br />
else <br />
alert ("You checked the box."); <br />
} <br />
function clearChecks(form){ <br />
for (var i = 0; i < 100; ++i) { <br />
form.elements[i].checked = false; <br />
} <br />
} <br />
function checkAll(form){ <br />
for (var i = 0; i < 100; ++i) { <br />
form.elements[i].checked = true; <br />
} <br />
} <br />
</SCRIPT><br />
<form><CENTER><br />
<INPUT TYPE="checkbox" onClick="uClicked(this)"><br />
<INPUT TYPE="checkbox" onClick="uClicked(this)"><br />
<INPUT TYPE="checkbox" onClick="uClicked(this)"><br />
<INPUT TYPE="checkbox" onClick="uClicked(this)"><br />
<INPUT TYPE="checkbox" onClick="uClicked(this)"><br />
<INPUT TYPE="checkbox" onClick="uClicked(this)"><br />
<INPUT TYPE="button" VALUE="Check All" onClick="checkAll(this.form)"><br />
<INPUT TYPE="button" VALUE="Clear Checks" onClick="clearChecks(this.form)"><br />
</FORM><br />
<br />
</BODY><br />
</HTML><br />
<br />
<br />
</source></div>
Admin