脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-[JavaScripst效果]全选、全不选、反选，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 读前笑一笑：
“老师，我11岁，想问一个问题。”“你好，想问神马？”“基友和炮友有什么不同啊？”
然后老师想了想很认真地回答他：“基友就是一起吃肯德基的朋友，pao友就是一起吃泡面的朋友。前者注重交流，后者注重效率。”
正文：
《想直接看效果，点这里》
复制代码
<html lang="en">
<head>
<;meta charset="UTF-8">
<tITle>【JavaScripst效果】全选、全不选、反选</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>
<p class="m-box">
<h2 class="hd">选择列表</h2>
<ul class="bd" id="j-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="j-checkAll"/>全选</label> <a href="javascript：void(0);" id="j-checkreverse">反选</a> <a href="javascript：void(0);" id="j-checkOk">确定</a></p>
</p>
<script>
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(){
//根据选项更新全选
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('j-itemBox'),
aItems : document.getElementsByName('item'),
oCheckAll : document.getElementById('j-checkAll'),
oCheckReverse : document.getElementById('j-checkReverse'),
oCheckOk : document.getElementById('j-checkOk')
});
myCheck.init();
</script>
</body>
</html>
觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！
以上是脚本宝典为你收集整理的javascript代码实例教程-[JavaScripst效果]全选、全不选、反选全部内容，希望文章能够帮你解决javascript代码实例教程-[JavaScripst效果]全选、全不选、反选所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。