http://wbex.ru/index.php?action=history&feed=atom&title=JavaScript_Tutorial%2FForm%2FCheckBox
JavaScript Tutorial/Form/CheckBox - История изменений
2026-04-05T04:39:18Z
История изменений этой страницы в вики
MediaWiki 1.30.0
http://wbex.ru/index.php?title=JavaScript_Tutorial/Form/CheckBox&diff=9111&oldid=prev
Admin: 1 версия
2010-05-26T08:24:48Z
<p>1 версия</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;">Версия 08:24, 26 мая 2010</td>
</tr><tr><td colspan="2" style="text-align: center;" lang="ru"><div class="mw-diff-empty">(нет различий)</div>
</td></tr></table>
Admin
http://wbex.ru/index.php?title=JavaScript_Tutorial/Form/CheckBox&diff=9110&oldid=prev
в 18:52, 25 мая 2010
2010-05-25T18:52:56Z
<p></p>
<p><b>Новая страница</b></p><div>== A Checkbox and an onclick Event Handler==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><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></source><br />
<br />
<br />
<br />
== A Checkbox, an onclick Event Handler and show/hide form controls==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><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></source><br />
<br />
<br />
<br />
== Checkbox==<br />
<br />
<p>The Checkbox object represents a graphical check box.</p><br />
<p>Check boxes are created as part of a form by using the <input> tag with the TYPE attribute set to checkbox in an HTML document.</p><br />
<p>Once created, check boxes can be accessed in JavaScript as an element of a form using dot notation.</p><br />
<p>Check boxes can also be grouped together under the same name and accessed as an array by using brackets.</p><br />
<p>Arguments, Properties, Methods, and Event Handlers Associated with the Checkbox Object are listed in the following table.</p><br />
checked<br />
A Boolean value that determines if the check box is checked.<br />
defaultChecked<br />
A Boolean value that holds the initial state of the check box. This value is set with the CHECKED attribute.<br />
form<br />
Returns the Form object of the check box.<br />
name<br />
The string specified in the NAME attribute of the HTML <input> tag.<br />
type<br />
The string specified in the TYPE attribute of the HTML <input> tag. This string is always checkbox for the Checkbox object.<br />
value<br />
The value returned when the form is submitted.<br />
blur()<br />
Removes focus from the check box.<br />
click()<br />
Calls the check box"s onClick event handler.<br />
focus()<br />
Applies focus to this check box.<br />
handleEvent()<br />
Passes an event to the appropriate event handler associated with the check box.<br />
onBlur<br />
The handler invoked when focus is removed from the check box.<br />
onClick<br />
The handler invoked when the check box is selected.<br />
onFocus<br />
The handler invoked when focus is applied to the check box.<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<script language="JavaScript"><br />
<!--<br />
function submitOrder()<br />
{<br />
var alertString = String("Order: ");<br />
if(document.orderForm.lettuceCB.checked == true)<br />
alertString += " with lettuce "; <br />
if(document.orderForm.cheeseCB.checked == true)<br />
alertString += "with cheese "; <br />
if(document.orderForm.tomatoeCB.checked == true)<br />
alertString += "with tomatoe "; <br />
alert(alertString);<br />
}<br />
--><br />
</script><br />
<form name="orderForm"><br />
Lettuce<br />
<input type="checkbox" value="lettuce" name="lettuceCB"><br><br />
Cheese <br />
<input type="checkbox" value="cheese" name="cheeseCB"><br><br />
Tomatoe<br />
<input type="checkbox" value="tomatoe"name="tomatoeCB"><hr><br />
Step 2:<br />
<input type="button" value="Submit Order" name="orderButton" onClick="submitOrder()"><br />
</form><br />
</html></source><br />
<br />
<br />
<br />
== Checkbox.blur()==<br />
<br />
<p>Syntax</p><br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
document.form.checkbox.blur()</source><br />
<br />
<br />
<br />
== Checkbox.checked==<br />
<br />
<p>Syntax</p><br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
document.form.checkbox.checked</source><br />
<br />
<br />
<br />
== Checkbox.click()==<br />
<br />
<p>Syntax</p><br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
document.form.checkbox.click()</source><br />
<br />
<br />
<br />
== Checkbox.defaultChecked==<br />
<br />
<p>Syntax</p><br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
document.form.checkbox.defaultChecked</source><br />
<br />
<br />
<br />
== Checkbox.focus()==<br />
<br />
<p>Syntax</p><br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
document.form.checkbox.focus()</source><br />
<br />
<br />
<br />
== Checkbox.form==<br />
<br />
<p>Syntax</p><br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
document.form.checkbox.form</source><br />
<br />
<br />
<br />
== Checkbox.handleEvent()==<br />
<br />
<p>Syntax</p><br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
document.form.checkbox.handleEvent(event)</source><br />
<br />
<br />
<p>The handleEvent() method provides a way to invoke a check box"s event handler, even though the event never happened.</p><br />
<p>Argument Associated with the handleEvent() Method</p><br />
event<br />
An Event object to be handled<br />
<br />
== Checkbox.name==<br />
<br />
<p>Syntax</p><br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
document.form.checkbox.name</source><br />
<br />
<br />
<br />
== Checkbox.onBlur==<br />
<br />
<p>Syntax</p><br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
onBlur="command"</source><br />
<br />
<br />
<br />
== Checkbox.onClick==<br />
<br />
<p>Syntax</p><br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
onClick="command"</source><br />
<br />
<br />
<br />
== Checkbox.onFocus==<br />
<br />
<p>Syntax</p><br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
onFocus="command"</source><br />
<br />
<br />
<br />
== Checkbox.type==<br />
<br />
<p>Syntax</p><br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
document.form.checkbox.type</source><br />
<br />
<br />
<br />
== Checkbox.value==<br />
<br />
<p>Syntax</p><br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
document.form.checkbox.value</source><br />
<br />
<br />
<br />
== Check if a CheckBox checked==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<title>Online Survey</title><br />
<script type="text/javascript" language="javascript"><br />
<!-- //<br />
function CheckCheckboxes(){<br />
var elLength = document.MyForm.elements.length;<br />
for (i=0; i<elLength; i++)<br />
{<br />
var type = MyForm.elements[i].type;<br />
if (type=="checkbox" && MyForm.elements[i].checked){<br />
alert("Form element in position " + i + " is of type checkbox and is checked.");<br />
}<br />
else if (type=="checkbox") {<br />
alert("Form element in position " + i + " is of type checkbox and is not checked.");<br />
}<br />
else {<br />
}<br />
}<br />
}<br />
// --><br />
</script><br />
</head><br />
<body><br />
<form action="http://www.wbex.ru" method="POST" name="MyForm"><br />
<table width="600"><br />
<tr><th colspan="3" align="center">Online Survey<br /><br /></th><br />
</tr><br />
<tr><br />
<td>Your Name:</td><br />
<td>&nbsp;</td><br />
<td><input type="text" name="YourName"/></td></tr><br />
<tr><br />
<td>Your Gender:</td><br />
<td>&nbsp;</td><br />
<td><br />
<input type="radio" name="Gender" value="Male"/>Male<br /><br />
<input type="radio" name="Gender" value="Female"/>Female<br /><br />
</td><br />
</tr><br />
<tr><td>Which of our consultancy <br />services are you interested in?</td><br />
<td align="right">&nbsp;<br />
</td><br />
<td><br />
<input type="checkbox" name="XML"/>&nbsp;XML<br /><br />
<input type="checkbox" name="XSLT"/>&nbsp;XSLT<br /><br />
<input type="checkbox" name="SVG"/>&nbsp;SVG<br /><br />
<input type="checkbox" name="XSL-FO"/>&nbsp;XSL-FO<br /><br />
<input type="checkbox" name="XForms"/>&nbsp;XForms<br /><br />
</td><br />
</tr><br />
<tr><br />
<td>Which free gift would you prefer for filling out this survey?</td><br />
<td>&nbsp;</td><br />
<td><br />
<select name="FreeGift"><br />
<option value="Choice1">Choice 1</option><br />
<option value="Choice2">Choice 2</option><br />
<option value="Choice3">Choice 3</option><br />
</select><br />
</tr><br />
<tr><br />
<td>Enter your comments in<br />the text box<br />
</td><br />
<td>&nbsp;</td><br />
<td><textarea name="Comments" rows="5" cols="50"></textarea></td><br />
</tr><br />
<tr><br />
<td>&nbsp;</td><br />
<td>&nbsp;</td><br />
<td><br /><input type="submit" value="Send Form" onclick="CheckCheckboxes()"/></td><br />
</tr><br />
</table><br />
</form><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Use checkbox to control the window style==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<title>Open Window</title><br />
<script language="JavaScript" type =" text/javascript"><br />
<!--<br />
function ChangeLink(currentform)<br />
{<br />
var window_feature = "";<br />
alert(window_feature);<br />
for (var cb=0; cb<currentform.length - 1; cb++) {<br />
if (currentform[cb].checked)<br />
{<br />
currentform[cb].value = 1;<br />
} else {<br />
currentform[cb].value = 0;<br />
}<br />
window_feature = (window_feature + "," + currentform[cb].name + "= [ic:ccc]"+ currentform[cb].value);<br />
}<br />
window.open("http://www.wbex.ru", "_blank", window_feature);<br />
}<br />
//--><br />
</script><br />
</head><br />
<body><br />
<form name="form1"><br />
<input type="checkbox" name="directories" value="0">Directories Option</p><br />
<P><input type="checkbox" name="location" value="0">Location Option</p><br />
<P><input type="checkbox" name="menubar" value="0">Menu Bar</p><br />
<P><input type="checkbox" name="resized" value="0">Allow Window to be Resized</p><br />
<P><input type="checkbox" name="scrollbars" value="0">Scrollbars</p><br />
<P><input type="checkbox" name="status" value="0">Status Bar</p><br />
<P><input type="checkbox" name="toolbar" value="0">Toolbar</p><br />
<P><input type="button" value="Create Window" name="CreateWin" onClick="ChangeLink(this.form)"></p><br />
</form><br />
</body><br />
</html></source></div>