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> 

 

转载于:https://www.cnblogs.com/zyg316/p/9116088.html