jQuery实现全选、全不选和反选，没有只能选一次的bug

来源：互联网发布：adobeacrobat9pro mac 编辑：程序博客网时间：2024/06/07 01:32

学习到用.attr设置checked属性时出现全选只能实现一次的效果（关键是作业必须用button做）。。很郁闷。。终于找到解决的办法啦：

第一个比较不常用的用button来做得全选全不选和反选按钮：

效果图如下：

具体代码如下：

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script src="jquery-1.11.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {

//全选

$(".all").click(function () {
//alert($("input[name='items']")[i]);
// $(".items").attr("checked",true);
$(".items").each(function () {
this.checked = true;
});

});
//全不选

$(".unall").click(function () {
//alert($("input[name='items']")[i]);
// $(".items").attr("checked", false);
$(".items").each(function () {
this.checked = false;
});
});
//反选

$(".un").click(function () {
$(".items").each(function () {
if (this.checked) {
this.checked = false;
}
else {
this.checked = true;
}
});
});

//提交
$(".tj").click(function () {
var $tj = "你选择的爱好是：";
$(".items").each(function () {
if (this.checked) {
$tj += this.value+"、";
}

});
alert($tj);
});

});

</script>
</head>
<body>

<label>你爱好的运动是？</label></br>
<input class="items"type="checkbox" value="足球"/>足球
<input class="items" type="checkbox" value="篮球"/>篮球
<input class="items" type="checkbox" value="羽毛"/>羽毛球
<input class="items" type="checkbox" value="乒乓球"/>乒乓球</br>
<input class="all" type="button" value="全选"/>
<input class="unall" type="button" value="全不选" />
<input class="un" type="button" value="反选" />
<input class="tj" type="button" value="提交" />

</body>
</html>

第二个用checkbox做全选全不选按钮，比较常用吧

效果如下：

具体代码如下：

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script src="jquery-1.11.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
//全选/全不选
var tag = 1;//全局变量，为了区别全选/全不选按钮是否选择
$(".che").click(function () {
var t = 1;//局部变量t是为了避免既执行全选又执行全不选
//全选时执行以下代码（按钮已被选择）
if (tag == 1&&t==1) {
$("input[name='items']").each(function () {
this.checked = true;
});
tag = 2;
t = 2;
}
//全不选时执行以下代码（按钮未被选择）
if (tag = 2&&t==1) {
$("input[name='items']").each(function () {
this.checked = false;
});
tag = 1;
t = 2;
}

});
//反选
$(".unche").click(function () {
$("input[name='items']").each(function () {
if (this.checked) {
this.checked = false;
} else {
this.checked = true;
}
});
});
//提交
$("input[name='submit']").click(function () {
var $tj = "你选择的爱好是：";
$("input[name='items']").each(function () {
if (this.checked) {
$tj += this.value + "、";
}

});
alert($tj);
});

});
</script>
</head>
<body>
<div>
<label>你爱好的运动是？</label><input class="che" type="checkbox" /><label>全选/全不选</label>
<input class="unche" type="checkbox" /><label>反选</label></br>
<input name="items" type="checkbox" value="足球" />足球
<input name="items" type="checkbox" value="篮球" />篮球
<input name="items" type="checkbox" value="羽毛球" />羽毛球
<input name="items" type="checkbox" value="乒乓球" />乒乓球</br>
<input name="submit" type="submit" value="提交"/>
</div>
</body>
</html>

1 0