码迷,mamicode.com
首页 > 其他好文 > 详细

20150620复选框的全选和反选

时间:2015-06-20 09:06:17      阅读:115      评论:0      收藏:0      [点我收藏+]

标签:

html=======

<div class="demo1">
    <h5><input type="checkbox" id="all" /><label>全选选项</label></h5>
    <p><input type="checkbox" name="item" /><label>选项(一)</label></p>
    <p><input type="checkbox" name="item" /><label>选项(二)</label></p>
    <p><input type="checkbox" name="item" /><label>选项(三)</label></p>
    <p><input type="checkbox" name="item" /><label>选项(四)</label></p>
    <p><input type="checkbox" name="item" /><label>选项(五)</label></p>
    <p><input type="checkbox" name="item" /><label>选项(六)</label></p>
    <p><input type="checkbox" name="item" /><label>选项(七)</label></p>
    <p><input type="checkbox" name="item" /><label>选项(八)</label></p>
    <p><input type="checkbox" name="item" /><label>选项(九)</label></p>
    <p><input type="checkbox" name="item" /><label>选项(十)</label></p>
</div>

js===========


var input=document.getElementsByName(‘item‘);
console.log(input.length);
var all=document.getElementById(‘all‘);
all.onclick=function (arguments) {
    for (var i = 0; i < input.length; i++) {
        if(input[i].checked){
            input[i].checked=false;
        }else{
            input[i].checked=true;
        }
    }
}

 

20150620复选框的全选和反选

标签:

原文地址:http://www.cnblogs.com/wz0107/p/4590187.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!