Jquery 实现全选全不选功能
2017-11-13 08:02
375 查看
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>attr</title>
<script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
<form action="" method="post">
<p>爱好选择</p>
<p>
<lable>
<input type="checkbox" />篮球
</lable>
</p>
<p>
<lable>
<input type="checkbox" />足球
</lable>
</p>
<p>
<lable>
<input type="checkbox" />乒乓球
</lable>
</p>
<p>
<lable>
<input type="checkbox" />游泳
</lable>
</p>
<p>
<lable>
<input type="checkbox" />羽毛球
</lable>
</p>
</form>
<p>
<button id="all">全选</button>
<button id="notall">全不选</button>
<button id="unall">反选</button>
<button id="ok">ok</button>
</p>
<hr />
<div class="info">
</div>
</body>
<script type="text/javascript">
$("#all").click(function(){
$(":checkbox").attr({'checked':true});
});
$("#notall").click(function(){
$(":checkbox").attr({'checked':false});
});
$("#unall").click(function(){
$(":checkbox").each(function(){
this.checked=!this.checked;
});
});
$("#ok").click(function(){
$(":checked").parent().parent().appendTo(".info");
})
</script>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>attr</title>
<script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
<form action="" method="post">
<p>爱好选择</p>
<p>
<lable>
<input type="checkbox" />篮球
</lable>
</p>
<p>
<lable>
<input type="checkbox" />足球
</lable>
</p>
<p>
<lable>
<input type="checkbox" />乒乓球
</lable>
</p>
<p>
<lable>
<input type="checkbox" />游泳
</lable>
</p>
<p>
<lable>
<input type="checkbox" />羽毛球
</lable>
</p>
</form>
<p>
<button id="all">全选</button>
<button id="notall">全不选</button>
<button id="unall">反选</button>
<button id="ok">ok</button>
</p>
<hr />
<div class="info">
</div>
</body>
<script type="text/javascript">
$("#all").click(function(){
$(":checkbox").attr({'checked':true});
});
$("#notall").click(function(){
$(":checkbox").attr({'checked':false});
});
$("#unall").click(function(){
$(":checkbox").each(function(){
this.checked=!this.checked;
});
});
$("#ok").click(function(){
$(":checked").parent().parent().appendTo(".info");
})
</script>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jquery实现全选反选功能
- JQuery学习(4)全选反选功能的实现
- jquery实现全选和取消全选(包含子选框全选中,父选框选中功能)
- js和jQuery实现获取id和点击checkbox全选功能
- jquery实现全选、反选、不选功能
- JQuery学习(4)全选反选功能的实现
- JQuery实现列表中复选框全选反选功能封装
- jQuery 实现 Checkbox 的全选、全不选和反向选择的功能
- jquery 实现checkbox全选，反选，全不选等功能代码(奇数)
- 天易20----jquery实现复选框的全选与全不选功能
- jquery实现全选和全不选功能效果的实现代码【推荐】
- jquery实现checkbox的全选跟取消功能
- jQuery实现表单全选、全不选以及反选的功能
- Jquery实现全选反选功能
- JQuery实现列表中复选框全选反选功能封装
- jQuery中实现全选功能时使用attr( )改变checked值只能生效一次的问题
- jquery实现全选和全不选功能
- js, jQuery实现全选、反选功能
- jquery实现全选和全不选功能效果的实现代码【推荐】
- jquery实现反选、全选、全不选功能