使用js实现全选、反选功能

最新推荐文章于 2019-10-30 23:30:09 发布

很菜的程序员

最新推荐文章于 2019-10-30 23:30:09 发布

阅读量642

点赞数

分类专栏：小例子文章标签： javascript jquery 全选反选

本文链接：https://blog.csdn.net/qq303437511/article/details/51135140

版权

小例子专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../js/jquery-1.4.2.js"></script>
</head>
<body>
<form method="post" action="">
请选择您的爱好!
<br><input type="checkbox" id="checkedAll_2"/>全选/全不选
<br/>
<input type="checkbox" name="items" value="足球"/>足球
<input type="checkbox" name="items" value="篮球"/>篮球
<input type="checkbox" name="items" value="游泳"/>游泳
<input type="checkbox" name="items" value="唱歌"/>唱歌
<br/>
<input type="button" id="CheckedAll" value="全　选"/>
<input type="button" id="CheckedNo" value="全不选"/>
<input type="button" id="CheckedRev" value="反　选"/>

<input type="button" id="send" value="提　交"/>
</form>
</body>
<script type="text/javascript">
$("#checkedAll_2").click(function(){
$(":checkbox[name='items']").attr("checked",$("#checkedAll_2").attr("checked"))
});
$("#CheckedAll").click(function(){
$(":checkbox[name='items']").attr("checked", true);

});
$("#CheckedNo").click(function(){
$(":checkbox[name='items']").removeAttr("checked");

});
$("#CheckedRev").click(function(){
$(":checkbox[name='items']").each(function(i,obj){
$(obj).attr("checked",!$(obj).attr("checked"))
});
});
</script>

</html>

$(":checkbox[name='items']")表示配匹所有的checkbox并且名字为items。

说明不同版本的jquery 可以有部分功能实现不了，具体原因我也不知道，我用1.9.1 实现不了最上面一个反选功能。1.4.2可以实现所有功能。