radio与checkbox
最近一直在学习Javascript与asp.net MVC4，每天都在跟着书学习。这样总感觉自己看的很抽象，没有点实际的意义。而且，每次看的东西很容易忘记，所以打算在这里记录自己的学习笔记。
Javascript已经看了不少天了，本文主要讲述的是radio与checkbox。
1.radio
radio又称单选框，它是html表单中的单选按钮。通常单选按钮是成组出现的，是互斥的，每次只能选取一个。当点击按钮的时候，就会触发onclick事件。通过属性checked判断按钮是否被选中。声明的语法如下：<input type="radio">
2.checkbox
checkbox又称复选框，它是html表单中的一个选择框。通过checked属性判断是否被选中。声明语法如下：<input type="checkbox">
3.实例
这个例子是书本里的例子，一个简单的购买物品的例子。我只是自己搬出来让他实现了一般而已，直接上代码。
1 function checkAll() {
2 with (form1) {
3 for (var i = 0; i < length; i++) {
4 if (elements[i].type == "checkbox") {
5 elements[i].checked = true;
6 }
7 }
8 }
9 }这是全选代码，通过对document的form标签内的元素进行循环，设置每个checkbox的checked属性为true。
1 function checkIt(obj){
2 var index = obj.name.charAt(3);
3 eval("if(form1.check"+index+".checked==false)form1.check"+index+".checkded=true");
4
5 }这是单选代码，可以将选取的checkbox的checked设置为true。
1 function mybuy() {
2 with (form1) {
3 for (var i = 0; i < length; i++) {
4 if (elements[i].name == "radio1")
5 break;
6 }
7 for (var j = 0; j < 4; j++) {
8 if (elements[j].checked == true)
9 break;
10 }
11 switch (j) {
12 case 0:
13 var cardStr = "ViSA";
14 break;
15 case 1:
16 cardStr = "建行";
17 break;
18 case 2:
19 cardStr = "农业银行";
20 break;
21 default:
22 cardStr = myradio4.value;
23 break;
24
25 }
26 }
27 newWin = open("", "", "width=500,height=500");
28 newWin.document.write("您使用的卡号是：" + form1.cardNumber.value + "的" + cardStr + "购买以下物品：<p>");
29 for (var i = 0; i < form1.length; i++) {
30 if (form1.elements[i].type == "checkbox" && form1.elements[i].checked == true) {
31 index = form1.elements[i].name.charAt(5);
32 var num = eval("form1.num" + index + ".value");
33 newWin.document.write(form1.elements[i].value+" "+num+"件<p>");
34 }
35 }
36 }这里通过radio选择银行，首先找到第一个radio，然后确定被选择的radio的索引，最后获取该radio的name。并将购买的信息在新窗口中进行显示。
1 <form id="form1" runat="server">
2 <div>
3 <h2 align="center">产品列表</h2>
4 <table>
5 <tr>
6 <td><input type="checkbox" name="check1" id="mycheck1" value="产品A" /><label for="mycheck1"> </label></td>
7 <td>数量：<input size=2 name="num1" value="1" onfocus="this.select()" onchange="checkIt(this);" /></td>
8 <td> 产品A</td>
9 </tr>
10 <tr>
11 <td><input type="checkbox" name="check2" id="mycheck2" value="产品A" /><label for="mycheck2"> </label></td>
12 <td>数量：<input size=2 name="num2" value="2" onfocus="this.select()" onchange="checkIt(this);" /></td>
13 <td> 产品B</td>
14 </tr>
15 <tr>
16 <td><input type="checkbox" name="check3" id="mycheck3" value="产品A" /><label for="mycheck3"> </label></td>
17 <td>数量：<input size=2 name="num3" value="1" onfocus="this.select()" onchange="checkIt(this);" /></td>
18 <td> 产品C</td>
19 </tr>
20 <tr>
21 <td><input type="button" name="allcheck" value="全选" onclick="checkAll();" /></td>
22 </tr>
23 <tr>
24 <td><input type="reset" value="重选" /></td>
25 </tr>
26 </table>
27 <h3>请选择您的信用卡类型</h3>
28 <input type="radio" name="radio1" id="myradio1" checked="checked" /><label for="myradio1">Visa</label>
29 <input type="radio" name="radio1" id="myradio2" /><label for="myradio2">建行</label>
30 <input type="radio" name="radio1" id="myradio3" /><label for="myradio3">农业银行</label>
31 <input type="radio" name="radio1" id="myradio4" /><label for="myradio4">其他</label>
32 <input name="mycard" />
33 <p>请输入您的信用卡号：<input name="cardNumber" /></p>
34 </div>
35 <div>
36 <input type="submit" value="购买" onclick="mybuy();"/>
37 </div>
38 </form>这里是Html代码。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2014-06-24 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读