获取一组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("/")就是使用“/”来分隔获取的到每一组元素,如果括号里不写参数,就默认逗号
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>