javascript实现列表选择 全选 反选 全不选

javascript实现一个简单的列表选择效果,全选,全不选,反选功能。

javascript实现列表选择 全选 反选 全不选

实现思路

1、获取所有需要选中的元素,通过getElementsByName();

2、对获取的到的元素进行for循环;

3、反选的方法做一个判断,判断元素自身是否在选中状态checked;ture 为选中,false 或“”为不选。

看具体代码实现

HTML结构:

<ul style="list-style: none;">
    <li><input type="checkbox" name="ids[]" value="1">葡萄</li>
    <li><input type="checkbox" name="ids[]" value="1">香蕉</li>
    <li><input type="checkbox" name="ids[]" value="1">苹果</li>
    <li><input type="checkbox" name="ids[]" value="1">鸭梨</li>
    <li><input type="checkbox" name="ids[]" value="1">橘子</li>
    <li><input type="checkbox" name="ids[]" value="1">西红柿</li>
</ul>
<a href="javascript:selectAll();">全选</a>
<a href="javascript:selectNall();">全不选</a>
<a href="javascript:selectRev();">反选</a>

JavaScript代码:

//获取所有input
var all = document.getElementsByName("ids[]");
//全选方法
function selectAll(){
    for(var i=0;i<all.length;i++){
        all[i].checked="true";
    }
}
//全不选方法
function selectNall(){
    for(var i=0;i<all.length;i++){
        all[i].checked="";
    }
}
/反选方法
function selectRev(){
    for(var i=0;i<all.length;i++){
        if(all[i].checked){
            all[i].checked="";
        }else{
            all[i].checked="true";
        }
    }
}



原文链接:HelloWeb前端网 » javascript实现列表选择 全选 反选 全不选 » 感谢您的浏览,希望能有所帮助。

欢迎您加入“Helloweb” 学习交流群:HelloWeb-学习交流群 196291215 共同交流并结识同行,在这里说出您的收获与感想或有什么不同的观点,我们期待您的留言,分享,让我们一起进步!

喜欢 ()or分享