js做了个简单的js全选和反选 取消js全选和反选 与反选出现了小问题求大佬解答!

首先我们看个简单的实例


  

一般从數据库读出来的列表都需要批量选中以便删除与编辑等下面我们就来模拟下,实现复选框checkbox的js全选和反选与不选先建立html


  

1、js全选和反选或铨不选。当勾选js全选和反选按钮#selectAll旁边的复选框#all时列表中的选项全部选中,反之取消勾选则列表中的选项全部为未选中状态


  

2、js全选和反選。当点击js全选和反选按钮#selectAll或者勾选js全选和反选按钮旁边的复选框#all时列表中所有的选项都会被选中,包括js全选和反选旁边的复选框也是選中状态


  

3、全不选。当点击全不选按钮#unSelect时列表中所有的选项都是未选中状态,当然包括#all也是未选中状态


  

4、反选。当点击反选按钮#reverse列表中所有被选中的选项变为未选中状态,而所有未选中的选项变为已选中状态当然也要注意#all的状态。


  

代码中遍历了选项列表然后改變checked属性,最后调用函数allchk()后面将介绍该函数。

5、获得选中的所有值我们要跟后台程序交互就必须获取列表中所选项的值,我们通过遍历數组将选中项的值存放在数组中,最后组成由逗号(,)隔开的字符串开发者就可以通过获取这个字符串进行相应的操作了。


  

为了完善选中選项功能我们在单击列表中某个选项时,如果勾选的项刚好满足全部选中的条件则#all也要相应的变为选中状态,同样如果事先所有的選项是选中状态时,当取消勾选某个选项时那么#all也要相应的变为未选中状态。


  

函数allchk()就是用来检测js全选和反选框#all应该是选中状态还是未选Φ状态的请看代码。


  

jQuery操作复选框的选中和不选中状态非常简单使用attr()来设置"checked"属性的值,true未选中false为未选中,在整个js全选和反选、反选过程中注意处理js全选和反选复选框的选中状态以及获取选中选项的值。以下我将所有jQuery代码整理在一起供大家参考。

 
 
}

jsjs全选和反选反选全不选代码代碼本身核心部分非常少。主要是利用input的checked值的真假来判断遍历。这段js代码采用了结构行为分离原则结构中部混杂任何js代码。

html结构参看演礻


}

我要回帖

更多关于 js全选和反选 的文章

更多推荐

版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。

点击添加站长微信