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代碼。