全选与全不选是我们在网站开发过程中必然会遇到的一个小模块,下面青岛星网分别用Jquery与原生JS来实现全选、全不选、反选。
//实现方式一 $(function () { //全不选 $("#AllNotChk").click(function () { $("[name=chkbox_id]").removeAttr("checked"); }); //全选 $("#AllChk").click(function () { $("[name=chkbox_id]").attr("checked", "checked"); }); //反选 $("#FaiChk").click(function () { $("[name=chkbox_id]").each(function () { this.checked = !this.checked; }) }); }) //实现方式二 $(document).ready(function(){ $("#ckbAll").click(function(){ $("input[name='fav']").attr("checked",true); }); $("#ckbno").click(function(){ $("input[name='fav']").attr("checked",false); }); $("#ckbrec").click(function(){ $("input[name='fav']").each(function(){ // $(this).attr("checked",!$(this).attr("checked")); this.checked=!this.checked;//用的是Dom的属性 }); }); });
// 全部选中 function QuanXuan_Click() { var check = document.getElementsByTagName("input"); for (var i = 0; i < check.length; i++) { if (check[i].type == "checkbox") { check[i].checked = true; } } } // 取消选中 function QuXiao_Click() { var check = document.getElementsByTagName("input"); for (var i = 0; i < check.length; i++) { if (check[i].type == "checkbox") { check[i].checked = false; } } } // 反选 function slcNo_click() { var check = document.getElementsByTagName("input"); for (var i = 0; i < check.length; i++) { if (check[i].type == "checkbox") { if (check[i].checked == false) { check[i].checked = true; } else { check[i].checked = false; } } } }