js实现 全选/反选 和 单选

描述

一般用在后台管理数据，以及购物车批量操作 等多种情况

JS代码：

<script type="text/javascript"> function checkAll(){ //全选 和反选 以及 单选 //1.获取全选/反选元素 var all = document.getElementById("all"); //2.查找列表中每一项的元素 var ckOnes = document.getElementsByName("ckOne"); for (var i = 0; i < ckOnes.length; i++) { ckOnes[i].checked= all.checked;//把全选框的状态循环赋给所有的单选框！！！！！！ } } function checkOne(){//单选 //1.获取全选/反选元素 var all = document.getElementById("all"); //2.查找列表中每一项的元素 var ckOnes = document.getElementsByName("ckOne"); //定义一个变量，统计状态为选中的单选框的个数 var count=0; for (var i = 0; i < ckOnes.length; i++) {//循环各个单选 var ckOne= ckOnes[i]; //判断选中的 if(ckOne.checked==true){//循环得到单选的状态，如果单选状态为true的话，就让count++ count++;//这里得到了到底有几个单选框被选中 } } if(count==ckOnes.length){//判断count 如果count的数量等于单选框的数量的话，也就是说每一个都选中了的话，就让全选框状态为true all.checked=true; }else{ all.checked=false;//否则的话 全选框状态为 不选 } } </script>

html/jsp页面部分

全选/反选框部分

<td align="center" width="9%"><input type="checkbox" name="ckAll" value="全选/反选" onclick="checkAll()" id="all"/>全选/反选</td>

单选框部分

<td align="center" width="9%"><input type="checkbox" name="ckOne" onclick="checkOne()" id="one"/></td>

美滋滋！！！