http://wbex.ru/index.php?action=history&feed=atom&title=JavaScript_Tutorial%2FForm%2FRadio_Button
JavaScript Tutorial/Form/Radio Button - История изменений
2026-04-04T09:58:20Z
История изменений этой страницы в вики
MediaWiki 1.30.0
http://wbex.ru/index.php?title=JavaScript_Tutorial/Form/Radio_Button&diff=9125&oldid=prev
Admin: 1 версия
2010-05-26T08:24:49Z
<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/Radio_Button&diff=9124&oldid=prev
в 18:52, 25 мая 2010
2010-05-25T18:52:56Z
<p></p>
<p><b>Новая страница</b></p><div>== An onclick Event Handler for Radio Buttons==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html> <br />
<head> <br />
<title>Radio Button onClick Handler</title> <br />
<script type="text/javascript"> <br />
var myFlag = false <br />
function initValue() { <br />
myFlag = document.forms[0].sizes[0].checked; <br />
} <br />
function sh(form) { <br />
for (var i = 0; i < form.sizes.length; i++) { <br />
if (form.sizes[i].checked) { <br />
break; <br />
} <br />
} <br />
alert(form.sizes[i].value); <br />
} <br />
function setmyFlag(setting) { <br />
myFlag = setting; <br />
} <br />
function exitMsg() { <br />
if (myFlag) { <br />
alert("exit message."); <br />
} <br />
} <br />
</script> <br />
<br />
</head> <br />
<body onload="initValue()" onunload="exitMsg()"> <br />
<form> <br />
<input type="radio" name="sizes" value="1" checked="checked" onclick="setmyFlag(true)" />1<br />
<input type="radio" name="sizes" value="2" onclick="setmyFlag(false)" />2 <br />
<input type="radio" name="sizes" value="7" onclick="setmyFlag(false)" />7<br />
<input type="radio" name="sizes" value="5" onclick="setmyFlag(false)" />5<br />
<input type="button" name="Viewer" value="View" onclick="sh(this.form)" /></p> <br />
</form> <br />
</body> <br />
</html></source><br />
<br />
<br />
<br />
== Checking a Radio Button Group==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<title>Checking a Radio Button Group</title><br />
<script language="javascript" type="text/javascript"><br />
<!--//<br />
function evalGroup()<br />
{<br />
var group = document.radioForm.myRadio;<br />
for (var i=0; i<group.length; i++) {<br />
if (group[i].checked)<br />
break;<br />
}<br />
if (i==group.length)<br />
return alert("No radio button is checked");<br />
alert("Radio Button " + (i+1) + " is checked.");<br />
}<br />
//--><br />
</script><br />
</head><br />
<body><br />
<h1>Checking a Radio Button Group</h1><br />
<form name="radioForm"><br />
Radio Button 1: <input type="radio" name="myRadio" /><br /><br />
Radio Button 2: <input type="radio" name="myRadio" /><br /><br />
Radio Button 3: <input type="radio" name="myRadio" /><br /><br />
Radio Button 4: <input type="radio" name="myRadio" /><br /><br /><br />
<input type="button" value="Eval Group" onclick="evalGroup()" /><br />
</form><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Cycle the selected radio buttons==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html> <br />
<head> <br />
<title>Cycle</title> <br />
<script type="text/javascript"> <br />
function getSelectedButton(buttonGroup){ <br />
for (var i = 0; i < buttonGroup.length; i++) { <br />
if (buttonGroup[i].checked) { <br />
return i; <br />
} <br />
} <br />
return 0; <br />
} <br />
function cycle(form) { <br />
var i = getSelectedButton(form.sizes); <br />
if (i+1 == form.sizes.length) { <br />
form.sizes[0].checked = true; <br />
} else { <br />
form.sizes[i+1].checked = true; <br />
} <br />
} <br />
</script> <br />
</head> <br />
<body> <br />
<form> <br />
<input type="radio" name="sizes" value="3" checked="checked" />3<br />
<input type="radio" name="sizes" value="2" />2<br />
<input type="radio" name="sizes" value="0" />0<br />
<input type="radio" name="sizes" value="1" />1<br />
<input type="button" name="Cycler" value="Cycle Buttons" onclick="cycle(this.form)" /><br />
</form> <br />
</body> <br />
</html></source><br />
<br />
<br />
<br />
== Radio==<br />
<br />
<p>The Radio object represents a check box within an HTML form.</p><br />
<p>A check box is created using the HTML <input> tag and specifying the TYPE attribute as radio.</p><br />
Property/Method<br />
Description<br />
blur()<br />
Removes focus from Radio object<br />
checked<br />
Specifies whether a button is checked or unchecked<br />
click()<br />
Simulates a mouse click on the button<br />
defaultChecked<br />
Refers to the CHECKED attribute of the HTML <input> tag<br />
focus()<br />
Sets the focus to a button<br />
form<br />
Refers to the Form object that contains the Radio object<br />
handleEvent()<br />
Invokes the default handler for the specified event<br />
name<br />
Refers to the NAME attribute of the HTML <input> tag<br />
onBlur<br />
Event handler for Blur event<br />
onClick<br />
Event handler for Click event<br />
onFocus<br />
Event handler for Focus event<br />
type<br />
Refers to the TYPE attribute of the HTML <input> tag<br />
value<br />
Refers to the VALUE attribute of the HTML <input> tag<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<title> Example of the Radio object title><br />
</head><br />
<body><br />
<form name="form1"><br />
<input type="radio" name=button1 ?onClick="alert(document.form1.button1.name)">Box 1<br />
<br><br />
<input type="radio" name=button2>Box 2<br />
<br><br />
</form><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Radio.blur()==<br />
<br />
<p>The blur() method removes the focus from the check box.</p><br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<title> Example of the radio blur method</title><br />
</head><br />
<body><br />
<script language="JavaScript"><br />
<!--<br />
function change(){<br />
document.form1.button1.blur();<br />
document.form1.text1.value="Focus removed from button";<br />
}<br />
--><br />
</script><br />
<form name="form1"><br />
<input type="radio" name=button1 CHECKED>Box 1<br />
<br><br />
<input type="radio" name=button2>Box 2<br />
<br><br />
<input type="button" value="Remove Focus" onClick="change()"><br />
<br><br />
<input type="text" name="text1" size=15><br />
</form><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Radio.checked==<br />
<br />
<p>The checked property is a Boolean value used to determine whether a radio button is in a checked or unchecked state.</p><br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<title> Example of the radio checked property</title><br />
</head><br />
<body><br />
<script language="JavaScript"><br />
<!--<br />
function checkButton(){<br />
if(document.form1.button1.checked == true){<br />
alert("Box1 is checked");<br />
} else if(document.form1.button2.checked == true){<br />
alert("Box 2 is checked");<br />
}<br />
}<br />
--><br />
</script><br />
<form name="form1"><br />
<input type="radio" name=button1>Box 1<br />
<br><br />
<input type="radio" name=button2 CHECKED>Box 2<br />
<br><br />
<INPUT type="button" value="Get Checked" onClick="checkButton()"><br />
</form><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Radio.click()==<br />
<br />
<p>The click() property simulates a mouse click on the radio button.</p><br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<title> Example of the radio click property</title><br />
</head><br />
<body><br />
By pressing the "Simulate Click" button below, box 2 becomes checked<br />
because a simulated mouse click is performed.<br />
<form name="form1"><br />
<input type="radio" name=button1 CHECKED>Box 1<br />
<br><br />
<input type="radio" name=button2>Box 2<br />
<br><br />
<input type="button" value="Simulate Click" onClick="document.form1.button2.click()"><br />
</form><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Radio.defaultChecked==<br />
<br />
<p>The defaultChecked property is a Boolean value that reports which radio buttons contain the HTML CHECKED attribute.</p><br />
<p>If the CHECKED attribute is contained in the Radio object, true is returned. Otherwise, false is returned.</p><br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<title> Example of the radio defaultChecked property</title><br />
</head><br />
<body><br />
<script language="JavaScript"><br />
<!--<br />
function checkBox(){<br />
if(document.form1.button1.defaultChecked == true){<br />
alert("Box1 is checked by default");<br />
} else if(document.form1.button2.defaultChecked == true){<br />
alert("Box 2 is checked by default");<br />
}<br />
}<br />
--><br />
</script><br />
<form name="form1"><br />
<input type="radio" name=button1>Box 1<br />
<br><br />
<input type="radio" name=button2 CHECKED>Box 2<br />
<br><br><br />
<input type="button" value="Get Default" onClick="checkBox()"><br />
</form><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Radio.focus()==<br />
<br />
<p>The focus() method sets the focus to the radio button.</p><br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<title> Example of the radio focus method</title><br />
</head><br />
<body><br />
<form name="form1"><br />
<input type="radio" name=button1>Box 1<br />
<br><br />
<input type="radio" name=button2>Box 2<br />
<br><br><br />
<input type="button" value="Set Focus to Box 1" onClick="document.form1.button1.focus()"><br />
</form><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Radio.form==<br />
<br />
<p>The form property references the Form object that contains the Radio box.</p><br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<title> Example of the radio form property</title><br />
</head><br />
<body><br />
<form name="form1"><br />
<input type="radio" name=button1>Box 1<br />
<br><br />
<input type="radio" name=button2>Box 2<br />
<br><br><br />
<input type="button" value="Get Form Name"<br />
onClick="alert("The form name is: " + document.form1.button1.form.name)"><br />
</form><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Radio.handleEvent()==<br />
<br />
<p>Syntax</p><br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
radio.handleEvent(event)</source><br />
<br />
<br />
<br />
== Radio.name==<br />
<br />
<p>The name property represents the NAME attribute of the HTML <input> tag that creates the Radio button.</p><br />
<p>This allows you to reference a Radio object directly by name.</p><br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<title> Example of the radio name property</title><br />
</head><br />
<body><br />
<form name="form1"><br />
<input type="radio" name=myButton>Box 1<br />
<br><br><br />
<input type="button" value="Get Name" onClick="alert("The name of the button is: " +<br />
document.form1.myButton.name)"><br />
</form><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Radio.onBlur==<br />
<br />
<p>The onBlur property notifies you when the focus is removed from a radio button.</p><br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<title> Example of the Radio onBlur event handler</title><br />
</head><br />
<body><br />
<script language="JavaScript"><br />
<!--<br />
function showChange(){<br />
document.form1.text1.value = "Focus removed from Radio Button";<br />
}<br />
--><br />
</script><br />
<form name="form1"><br />
Click the radio button first, then click in the text area.<br />
<br><br><br />
<input type="radio" name=button1 onBlur="showChange()">Box 1<br />
<br><br />
Click the text box<br />
<input type="text" name="text1" size=40><br />
<br><br />
</form><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Radio.onClick==<br />
<br />
<p>The onClick property is an event handler that notifies you when the mouse has been clicked on the button.</p><br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<title> Example of the radio onClick event handler</title><br />
</head><br />
<body><br />
<form name="form1"><br />
<input type="radio" name=button1<br />
onClick="alert("This mouse was clicked on this object")">Box 1<br />
<br><br />
</form><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Radio.onFocus()==<br />
<br />
<p>The onFocus event handler is an event handler that notifies you when the focus is set on the radio button.</p><br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<title> Example of the radio onFocus event handler</title><br />
</head><br />
<body><br />
<script language="JavaScript"><br />
<!--<br />
function showFocus(){<br />
alert("Focus set on Box 1");<br />
}<br />
--><br />
</script><br />
<form name="form1"><br />
Click on the radio button<br />
<br><br><br />
<input type="radio" name=button1 onFocus="showFocus()">Box 1<br />
</form><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Radio.type==<br />
<br />
<p>The type property represents the button"s TYPE HTML attribute. For this object, it is always radio.</p><br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<title> Example of the radio type property</title><br />
</head><br />
<body><br />
<form name="form1"><br />
<input type="radio" name=button1>Box 1<br />
<br><br><br />
<input type="button" value="Get Button Type"<br />
onClick="alert("The button type is: " + document.form1.button1.type)"><br />
</form><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Radio.value==<br />
<br />
<p>The value property represents the VALUE attribute of the HTML <input> tag used to create the radio button.</p><br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<title> Example of the radio value property</title><br />
</head><br />
<body><br />
<form name="form1"><br />
<input type="radio" name=button1 value=1>Box 1<br />
<br><br><br />
<input type="button" value="Get Button Value"<br />
onClick="alert("The button value is: " + document.form1.button1.value)"><br />
</form><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== With with RADIO and CheckBox==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<HTML><br />
<HEAD><br />
<TITLE>Customize Your Pizza</TITLE><br />
<SCRIPT LANGUAGE="JavaScript"><br />
<!--<br />
function radio1Clicked()<br />
{<br />
clearCheckboxes()<br />
document.form1.check1.checked = true<br />
document.form1.check4.checked = true<br />
displayCost()<br />
}<br />
function radio2Clicked()<br />
{<br />
clearCheckboxes()<br />
document.form1.check3.checked = true<br />
document.form1.check4.checked = true<br />
displayCost()<br />
}<br />
function radio3Clicked()<br />
{<br />
clearCheckboxes()<br />
document.form1.check2.checked = true<br />
document.form1.check4.checked = true<br />
displayCost()<br />
}<br />
function radio4Clicked()<br />
{<br />
clearCheckboxes()<br />
document.form1.check1.checked = true<br />
document.form1.check2.checked = true<br />
document.form1.check3.checked = true<br />
document.form1.check4.checked = true<br />
displayCost()<br />
}<br />
function radio5Clicked()<br />
{<br />
clearCheckboxes()<br />
document.form1.check1.checked = true<br />
document.form1.check2.checked = true<br />
document.form1.check3.checked = true<br />
document.form1.check4.checked = true<br />
document.form1.check5.checked = true<br />
displayCost()<br />
}<br />
function clearCheckboxes()<br />
{<br />
document.form1.check1.checked = false<br />
document.form1.check2.checked = false<br />
document.form1.check3.checked = false<br />
document.form1.check4.checked = false<br />
document.form1.check5.checked = false<br />
}<br />
function displayCost()<br />
{<br />
var cost = 10.00<br />
if(document.form1.check1.checked){<br />
cost += .50<br />
}<br />
if(document.form1.check2.checked){<br />
cost += .50<br />
}<br />
if(document.form1.check3.checked){<br />
cost += .50<br />
}<br />
if(document.form1.check4.checked){<br />
cost += .50<br />
}<br />
if(document.form1.check5.checked){<br />
cost += .50<br />
}<br />
document.form1.text1.value = "Total cost: $" + cost.toPrecision(4)<br />
}<br />
//--><br />
</SCRIPT><br />
</HEAD><br />
<BODY><br />
<H1>Customize Your Pizza</H1><br />
<BR><br />
<FORM NAME="form1"><br />
<TABLE NAME="table1" BORDER BGCOLOR="cyan" WIDTH="200" ALIGN="LEFT"><br />
<TR><TD><INPUT TYPE="RADIO" NAME="radios" ONCLICK="radio1Clicked()">A</TD></TR><br />
<TR><TD><INPUT TYPE="RADIO" NAME="radios" ONCLICK="radio2Clicked()">B</TD></TR><br />
<TR><TD><INPUT TYPE="RADIO" NAME="radios" ONCLICK="radio3Clicked()">C</TD></TR><br />
<TR><TD><INPUT TYPE="RADIO" NAME="radios" ONCLICK="radio4Clicked()">D</TD></TR><br />
<TR><TD><INPUT TYPE="RADIO" NAME="radios" ONCLICK="radio5Clicked()">E</TD></TR><br />
</TABLE><br />
<TABLE NAME="table2" BORDER BGCOLOR="cyan" WIDTH="200" ALIGN="LEFT"><br />
<TR><TD><INPUT TYPE="CHECKBOX" NAME="check1" ONCLICK="displayCost()">F</TD></TR><br />
<TR><TD><INPUT TYPE="CHECKBOX" NAME="check2" ONCLICK="displayCost()">G</TD></TR><br />
<TR><TD><INPUT TYPE="CHECKBOX" NAME="check3" ONCLICK="displayCost()">H</TD></TR><br />
<TR><TD><INPUT TYPE="CHECKBOX" NAME="check4" ONCLICK="displayCost()">I</TD></TR><br />
<TR><TD><INPUT TYPE="CHECKBOX" NAME="check5" ONCLICK="displayCost()">J</TD></TR><br />
</TABLE><br />
<BR CLEAR="ALL"><br />
<BR><br />
<INPUT NAME="text1"><br />
</FORM><br />
</BODY><br />
</HTML></source></div>