您的位置：首页 > Web前端 > JQuery

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

2015-12-26 17:19 706 查看

学习到用.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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 复选框全选全不选反选

相关文章推荐

新的分享

章节导航