input的checked属性
通过点击切换按钮,实现选框的选中/取消选中效果。主要用于购物车等。
<style>
ul.inputul{
list-style-type:none;
}
</style>
<input type="button" id="inputall" value="全选" /><input type="button" id="inputnotall" value="反选" /><input type="checkbox" id="inputspecial" />
<ul class="inputul">
<li><span></span><input type="checkbox"></li>
<li><span></span><input type="checkbox"></li>
<li><span></span><input type="checkbox"></li>
<li><span></span><input type="checkbox"></li>
<li><span></span><input type="checkbox"></li>
<li><span></span><input type="checkbox"></li>
</ul>
<script>
var spans=document.querySelectorAll(".inputul span");
var all=document.querySelector("#inputall");
var notall=document.querySelector("#inputnotall");
var inputcheck=document.querySelectorAll(".inputul input");
var special=document.querySelector("#inputspecial");
for(var i=0;i<spans.length;i++){
spans[i].innerHTML=i+1+".";
}
all.onclick=function(){
for(var i=0;i<inputcheck.length;i++){
inputcheck[i].checked=true;
}
special.checked=true;
}
notall.onclick=function(){
var sum=0;
for(var i=0;i<inputcheck.length;i++){
inputcheck[i].checked=!inputcheck[i].checked;
}
for(var i=0;i<inputcheck.length;i++){
if(inputcheck[i].checked==false){
break;
}
sum++;
}
if(sum==inputcheck.length){
special.checked=true;
}else{
special.checked=false;
}
}
var sums=0;
for(var i=0;i<inputcheck.length;i++){
inputcheck[i].onclick=function(){
for(var i=0;i<inputcheck.length;i++){
if(inputcheck[i].checked==false){
break;
}
sums++;
}
if(sums==inputcheck.length){
special.checked=true;
}else{
special.checked=false;
}
sums=0;
}
}
</script>