你的位置:首页 > Java教程

[Java教程]复选框全选、取消全选、反选操作


越来越多的人有了选择恐惧症,”治疗“的最好方式就是全选或全部不选。常用的邮箱每页可以显示20封邮件,如果要删除全部邮件,一个一个的选择然后删除有点太繁琐了。为了减低操作成本,提升用户体验,所有邮箱提供了一个全选的功能。
本例要实现三个简单的操作:
全选、取消全选、反选
思路: 
通过控制复选框的属性checked可以设置复选框的选中状态。
全选:就是将所有复选框的checked设置为true
全选
取消全选:就是将所有复选框的checked设置为false
取消全选
反选:就是将所有选中的复选框设置为false,未选中的设置为true就OK啦
反选
接下来代码实现:
代码其实很简单,根据上述思路改变checkbox的属性checked的值就行了。
HTML:
<input type="checkbox" name="sport">篮球<br/><input type="checkbox" name="sport">足球<br/><input type="checkbox" name="sport">羽毛球<br/><input type="checkbox" name="sport">乒乓球<br/><input type="checkbox" name="sport">网球<br/><div>  <span id="allSelect">全选/取消全选</span>  <span id="revSelect">反选</span></div>

javaScript:

全选/反选操作:

/*全选/取消全选*/allSelect.onclick = function(){  if(len == oSports.length){ /*当复选框都被选中的时候进行取消操作*/    for(var i = 0;i < oSports.length;i++){      oSports[i].checked = false; /*将复选框的checked属性设置为false就取消选择了*/      len = 0;    }  }else{    for(var i = 0;i < oSports.length;i++){        oSports[i].checked = true; /*将复选框的checked属性设置为true*/      len++;      }  }}

反选操作:

/*反选*/revSelect.onclick = function(){  for(var i = 0;i < oSports.length;i++){    oSports[i].checked = !oSports[i].checked; /*将复选框设置为与之前的选择状态相反*/  }}

扫描二维码关注微信公众号:

还望各路大神指点指点,谢谢!