原生js版全选、取消全选、反选效果。
效果图如下：
源代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>原生js全选、全不选、反选特效</title>
<style>
h2, ul, p { margin: 0; padding: 0; }
ul { list-style: none; }
h2 { font-size: 100%; text-indent: 5px; }
input { vertical-align: -2px; *vertical-align: -1px; }
.m-box { width: 400px; border: 1px #666 solid; margin: 0 auto; font: 12px/30px "microsoft yahei"; }
.m-box .hd,.m-box .ft { background-color: #ccc; }
.m-box .bd { overflow-x: hidden; overflow-y: auto; position: relative; height: 120px; }
.m-box .bd li label { display: block; height: 30px; vertical-align: top; }
</style>
</head>
<body>
<div class="m-box">
<h2 class="hd">选择列表</h2>
<ul class="bd" id="itemBox">
<li><label><input type="checkbox" name="item" value="1"/>选项1</label></li>
<li><label><input type="checkbox" name="item" value="2"/>选项2</label></li>
<li><label><input type="checkbox" name="item" value="3"/>选项3</label></li>
<li><label><input type="checkbox" name="item" value="4"/>选项4</label></li>
<li><label><input type="checkbox" name="item" value="5"/>选项5</label></li>
<li><label><input type="checkbox" name="item" value="6"/>选项6</label></li>
<li><label><input type="checkbox" name="item" value="7"/>选项7</label></li>
<li><label><input type="checkbox" name="item" value="8"/>选项8</label></li>
<li><label><input type="checkbox" name="item" value="9"/>选项9</label></li>
<li><label><input type="checkbox" name="item" value="10"/>选项10</label></li>
</ul>
<p class="ft"><label><input type="checkbox" id="checkAll"/>全选</label> <a href="javascript:void(0);" id="checkReverse">反选</a> <a href="javascript:void(0);" id="checkOk">确定</a></p>
</div>
<script>
/* by jununx@gmail.com */
function Check(options){
this.oItemsBox = options.oItemsBox;
this.aItems = options.aItems;
this.oCheckAll = options.oCheckAll;
this.oCheckReverse = options.oCheckReverse;
this.oCheckOk = options.oCheckOk;
}
Check.prototype = {
init : function(){
var that = this;
//根据选项更新全选
this.oItemsBox.onclick = function(e){
var ev = e || window.event, target = ev.target || ev.srcElement;
if(target.tagName.toLowerCase() === "input"){
that.checkReverse(that);
}
};
//全选操作
this.oCheckAll.onclick = function(){
that.checkAll();
};
//反选操作
this.oCheckReverse.onclick = function(){
that.checkReverse(that, true);
};
//确定
this.oCheckOk.onclick = function(){
var test = that.checkReverse(that);
alert("您选择了value是：【"+test+"】的选项！");
};
},
//全选/全不选
checkAll : function(){
for(var i = 0, len = this.aItems.length; i < len; i++){
this.aItems[i].checked = this.oCheckAll.checked;
}
},
//根据选项更新全选
checkReverse : function(that, isReverse){
for(var i = 0, n = 0, arr = [], len = that.aItems.length; i < len; i++){
if(isReverse){
that.aItems[i].checked = !that.aItems[i].checked;
}
if(that.aItems[i].checked){n++;arr.push(that.aItems[i].value)}
}
that.oCheckAll.checked = len == n;
return arr;
}
};
//实例化
var myCheck = new Check({
oItemsBox : document.getElementById("itemBox"),//包含checkbox的父级图片的ID
aItems : document.getElementsByName("item"),//所有checkbox中name为item
oCheckAll : document.getElementById("checkAll"),//全选按钮的ID
oCheckReverse : document.getElementById("checkReverse"),//反选按钮的ID
oCheckOk : document.getElementById("checkOk")//确认选中的按钮ID
});
myCheck.init();
</script>
</body>
</html>
结论：
封装使用起来比较方便，只需要按照简单的几步就可以实现！
大家有什么问题或技术上的想法可以在此与大家分享，也可以加入前端爱好者QQ群(141999928)一起学习进步：
【幸凡前端技术交流群】
如果您觉得本文的内容对您的学习有所帮助，捐赠与共勉，支付宝(左)或微信(右)