全选与全不选是我们在网站开发过程中必然会遇到的一个小模块,下面青岛星网分别用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;
}
}
}
}
