CheckBox獲取一組及全選

獲取一組CheckBox：

jQuery：

 

$(function () {
　　$("input[name=names]").click(function () { //獲得所有的name=names的input，並給他們添加click監聽事件
　　　　var arr = new Array();
　　　　$("input[name=names]:checked").each(function (key, value) {
　　　　　　arr[key] = $(value).val();
　　　　});
　　　　$("#getnames").text("選中" + arr.length + "項：" + arr.join(","));//更新到p層上
　　});
});

//join()方法用於把數組中的所有元素放入一個字符串，元素是通過指定分隔符進行分隔的。
//如：.join("/")就是使用“/”來分隔獲取的到每一組元素，如果括號里不寫參數，就默認逗號
//each()方法規定為每個匹配元素規定運行的函數，此處用來遍歷這些CheckBox選中的，,each
//中有兩個參數，第一個是選擇器的位置，也就是索引，如果有三個選中，會逐個遍歷循環，第一次
//的時候，key為0，第二次key為1，依次遞加，而第二個參數就是當前元素自己，和this一樣，
//比如要獲取這個元素的值就可以直接$(value).val()；也可以$(this).val(),如果用不到第一個
//參數的時候，可以兩個參數都不寫，獲取元素值直接$(this).val()就行

 

HTML：

 

<input type="checkbox" name="names" value="jim" />jim
<input type="checkbox" name="names" value="tom" />tom
<input type="checkbox" name="names" value="lily" />lily
<p id="getnames"></p>

 

運行效果：

 

=======================================我是分割線====================================================

CheckBox全選：

js：

 

<script>  
    function checkAll() {  
        var all=document.getElementById('all');//獲取到點擊全選的那個復選框的id  
        var one=document.getElementsByName('checkname[]');//獲取到復選框的名稱  
        if(all.checked==true){//因為獲得的是數組，所以要循環 為每一個checked賦值  
            for(var i=0;i<one.length;i++){  
                one[i].checked=true;
            }  
  
        }else{  
            for(var j=0;j<one.length;j++){  
                one[j].checked=false;  
            }  
        }  
    }  
</script>  

//或者不用if，else判斷全選鍵是否選中，直接獲取完all和one之后，循環里面寫one[i].checked=all.checked,直接賦值

 

HTML：

 

<thead>  
<tr>  
    <td><input type="checkbox" name="all" id="all" onclick="checkAll()" /></td>  
</tr>  
</thead>  
<tbody>  
<td><input type="checkbox" name="checkname[]"value="1"/></td>  
  
  
<td><input type="checkbox" name="checkname[]" value="2"/></td>  
  
<td><input type="checkbox" name="checkname[]" value="3"/></td>  
  
<td><input type="checkbox" name="checkname[]" value="4"/></td>  
  
<td><input type="checkbox" name="checkname[]" value="5"/></td>  
</tbody> 

 

jQuery實現全選：

 

<script type="text/javascript">  
        //checkbox 全選/取消全選  
        var isCheckAll = false;  
        function swapCheck() {  
            if (isCheckAll) {  
                $("input[type='checkbox']").each(function() {  
                    this.checked = false;  
                });  
                isCheckAll = false;  
            } else {  
                $("input[type='checkbox']").each(function() {  
                    this.checked = true;  
                });  
                isCheckAll = true;  
            }  
        }  
    </script>  

 

HTML：

 

<table border="1">  
        <tr>  
            <th><input type="checkbox" onclick="swapCheck()" /></th>  
            <th>Month</th>  
            <th>Savings</th>  
        </tr>  
        <tr>  
            <td><input type="checkbox" /></td>  
            <td>January</td>  
            <td>$100</td>  
        </tr>  
        <tr>  
            <td><input type="checkbox" /></td>  
            <td>February</td>  
            <td>$150</td>  
        </tr>  
    </table>