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+"&nbsp;&nbsp;"+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">&nbsp;&nbsp;</label></td>

 7     <td>数量：<input size=2 name="num1" value="1" onfocus="this.select()" onchange="checkIt(this);" /></td>

 8     <td>&nbsp;&nbsp;产品A</td>

 9     </tr>

10        <tr>

11     <td><input type="checkbox" name="check2" id="mycheck2" value="产品A" /><label for="mycheck2">&nbsp;&nbsp;</label></td>

12     <td>数量：<input size=2 name="num2" value="2" onfocus="this.select()" onchange="checkIt(this);" /></td>

13     <td>&nbsp;&nbsp;产品B</td>

14     </tr>

15        <tr>

16     <td><input type="checkbox" name="check3" id="mycheck3" value="产品A" /><label for="mycheck3">&nbsp;&nbsp;</label></td>

17     <td>数量：<input size=2 name="num3" value="1" onfocus="this.select()" onchange="checkIt(this);" /></td>

18     <td>&nbsp;&nbsp;产品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

这里是Html代码。