首页 > 代码库 > javascript实现全选全不选
javascript实现全选全不选
在JSP页面中有6个复选框,第一个复选框是全选和全不选,其余5个为普通复选框,当点击全选复选框后,普通复选框将被全部选中,如果再次点击 全选复选框,那么普通复选框将被全部不选中,同时,如果全选复选框在选中状态下,将普通复选框的选中状态去掉,那么全选复选框也被设为未选中。相反,如果当前全选复选框未被选中,如果普通复选框被全部选中,那么全选按钮也被选中。
下面看JSP中复选框代码
<table> <tr> <td><input type="checkbox" name="checkall" onclick="selectall()"></td> <td>全选</td> </tr> <tr> <td><input type="checkbox" name="check" onclick="checkItem(this)"></td> <td>1</td> </tr> <tr> <td><input type="checkbox" name="check" onclick="checkItem(this)"></td> <td>2</td> </tr> <tr> <td><input type="checkbox" name="check" onclick="checkItem(this)"></td> <td>3</td> </tr> <tr> <td><input type="checkbox" name="check" onclick="checkItem(this)"></td> <td>4</td> </tr> <tr> <td><input type="checkbox" name="check" onclick="checkItem(this)"></td> <td>5</td> </tr> </table>然后我们看他们的javascript代码
<script type="text/javascript"> function selectall(){ //获取全选复选框 var root = document.getElementById("checkall"); //获取全选复选框的状态 var status = root.checked; //获取其他复选框集合 var elem = document.getElementsByName("check"); //如果全选复选框状态为真则全选其他按钮,否则选不选其他按钮 if(status){ for(var i = 0;i<elem.length;i++){ elem[i].checked = true; } }else{ for(var i = 0;i<elem.length;i++){ elem[i].checked = false; } } } function checkItem(ele){ var root = document.getElementById("checkall"); if(!ele.checked){ //当在全选状态去除某个非全选复选框时,全选复选框checked属性要设为false root.checked = false; }else{ //当在全不选状态时,补全剩下的非全选复选框时,全选复选框checked属性设为true var elem = document.getElementsByName(ele.name); for(var i = 0;i<elem.length;i++){ if(!elem[i].checked){ return; } } root.checked = true; } } </script>这样就可以实现上述功能。
javascript实现全选全不选
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。