java做全选反选功能_[Java教程]js实现全选反选

[Java教程]js实现全选反选

0 2017-04-04 00:00:12

在前端中用到全选反选的案例并不少，在这里呢我就实现这个功能给大家参考参考。

这里呢就先贴上我的html和css代码

	快递	收件人	电话
	顺丰	张大大	186*****897
	韵达	张全蛋	186*****897
	圆通	韩非	186*****897
	中国邮政	卫庄	186*****897

这是html部分的，下面呢，我附上css部分的代码：* { padding: 0; margin: 0; } .wrap { width: 300px; margin: 100px auto 0; } table { border-collapse: collapse; border-spacing: 0; border: 1px solid #c0c0c0; width: 300px; } th, td { border: 1px solid #d0d0d0; color: #404060; padding: 10px; } th { background-color:rgb(51, 199, 18); font: bold 16px "微软雅黑"; color: #fff; } td { font: 14px "微软雅黑"; } tbody tr { background-color: #f0f0f0; } tbody tr:hover { cursor: pointer; background-color: #fafafa; }

展示出来的布局是这样的：

好了，下面我们就开始讲重点把，做之前的呢，一定要理清思路，只有理清思路的才能好下手做啊

我们要通过点击第一个input标签来改变所有input标签的选择状态，

1.首先要获取到控制总选择状态的input标签，我们命名为inputAll

2.然后把每个input标签存到一个数组中去，我们命名为icheck

3.点击inputAll来改变状态，并且让icheck里面的input能跟着他的状态来变化

代码如下：window.onload = function() { //先获得控制全选反选的input标签 var inputAll = document.getElementById("theadInp"); //获得tbody var tbody = document.getElementById("tbody"); //获得天tbody里面的子元素 var icheck = tbody.getElementsByTagName("input"); console.log(icheck); //给控制全选反选的input标签绑定事件 inputAll.onclick = function() { //遍历tbody里面的input标签，把inputAll的状态赋值给icheck for(var i = 0; i < icheck.length; i++) { icheck[i].checked = this.checked; } }

上面都有写注释，大家肯定都能看的懂的，也没难点，就不需要解释了。

看下面：

以为这样就结束了事了吗？然而并没有。里面还是有个小问题的，就是当下面的input有一个以上没选中的时候，那么inputAll的状态也必须要跟着变化，总不能只让人家听他一个人的话吧，这就太不像话了。for(var i = 0; i < icheck.length; i++) { //给每个子元素都绑定事件 icheck[i].onclick = function() { //点击的时候在遍历icheck，看看是否有没选中的 for(var j = 0; j < icheck.length; j++) { //定义一个标志来记录 var flag = true; if(icheck[j].checked == false) { flag = false; } } inputAll.checked=flag; } }

现在这样才是真的完事了，这样才是真的完美解决了。大家可以自己试试。lz要去减肥去了

本文网址：http://www.shaoqun.com/a/305589.html

*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：admin@shaoqun.com。

JS

0