jquery 全选，全不选及反选

最新推荐文章于 2022-03-18 11:07:09 发布

Huangwenting1990

最新推荐文章于 2022-03-18 11:07:09 发布

阅读量527

点赞数

本文链接：https://blog.csdn.net/Huangwenting1990/article/details/52586870

版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery全选，全不选，反选</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<div class="list">
1<br />
<input type="checkbox" name="checkbox" value="1" /><br />
<input type="checkbox" name="checkbox" value="2" /><br />
<input type="checkbox" name="checkbox" value="3" /><br />
<input type="checkbox" name="checkbox" value="4" /><br />
<input type="checkbox" name="checkbox" value="5" /><br />
<input type="checkbox" name="checkbox" value="6" /><br />
<input type="button" value="全选" class="btn selectAll">
<input type="button" value="全不选" class="btn unSelect">
<input type="button" value="反选" class="btn reverse">
<input type="button" value="获得选中的所有值" class="btn getValue">
</div>
<br /><br />
<div class="list">
2<br />
<input type="checkbox" name="checkbox" value="5" /><br />
<input type="checkbox" name="checkbox" value="6" /><br />
<input type="checkbox" name="checkbox" value="7" /><br />
<input type="checkbox" name="checkbox" value="8" /><br />
<input type="checkbox" name="checkbox" value="9" /><br />
<input type="checkbox" name="checkbox" value="10" /><br />
<input type="button" value="全选" class="btn selectAll">
<input type="button" value="全不选" class="btn unSelect">
<input type="button" value="反选" class="btn reverse">
<input type="button" value="获得选中的所有值" class="btn getValue">
</div>
<body>
<script>
(function($){
$.fn.checkBoxSelect = function(options){
return this.each(function() {
var defaults = {
selectAllBtn:'.selectAll',
unSelectBtn:'.unSelect',
reverseSelectBtn:'.reverse',
getSelectValBtn:'.getValue'
}
var _this = $(this);
var valArr = new Array;
var vals,getVal;

var opts = $.extend({},defaults,options);
var selectAllBtn = $(opts.selectAllBtn, _this); //全选按钮
var unSelectBtn = $(opts.unSelectBtn, _this); //全不选按钮
var reverseSelectBtn = $(opts.reverseSelectBtn, _this); //反选按钮
var getSelectValBtn = $(opts.getSelectValBtn, _this); //取值按钮

selectAllBtn.click(function(){ //全选
_this.find(":checkbox").prop("checked",true);
});
unSelectBtn.click(function(){ // 全不选
_this.find(":checkbox").prop("checked",false);
});
reverseSelectBtn.click(function(){ //反选
_this.find(":checkbox").each(function(i){
$(this).prop("checked",!$(this).prop("checked"));
});

});
getSelectValBtn.click(function(){
getVal();
if(valArr.length>0){
alert("当前组选中的值为："+vals);
}else{
alert("毛都没有");
}
});
getVal = function(){
valArr.length = 0;
_this.find(":checkbox:checked").each(function(i){
valArr[i] = $(this).val();
});
vals = valArr.join(',');
}
})
}
})(jQuery);

$(function(){
//调用
$(".list").checkBoxSelect();
});
</script>
</body>

</html>