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>