在很多的表单中我们都会
看到有一个这样的功能,全选后进行一系列的操作。如
简单的js实现
首先要定义多选框,在表头可以使用id来定义同时添加onclick点击事件
<input type="checkbox" id="all" onclick="checkAllCart(this.checked)"/>
其余的用name来定义。为什么不用id来定义,大家应该都知道吧。
<input type="checkbox" name="one" value="${ct.key}" onclick="checkOneCart()"/>
js来实现
一步一步来先完成全选,全选很简单,
function checkAllCart(v) {var chOne = document.getElementsByName("one");for (var i = 0; i < chOne.length; i++) {chOne[i].checked = v;}}
来解释一下,获取name为one 的选框,通过遍历来进行选择,这里的v就等于true或false。
还有一步是,当全选完成后进行反选,这时候就不是全部了,那又如何处理。
function checkOneCart() {var chOne = document.getElementsByName("one");var flag = true;for (var i = 0; i < chOne.length; i++) {if (!chOne[i].checked) {document.getElementById("all").checked = false;//将all的按钮显示去掉flag = false;break;}if (flag) {document.getElementById("all").checked = true;}}}
同样获取name为one的选框。同时定义一个flag来选true与false。
在遍历全部的one的时候如果有一个不是true,这时候的全选会没有勾,同时定义flag为false
如果flag为true的时候全选会再次出现对勾。
这样一个简单的全选就完成了