Web全栈笔记之全选反向(新手必备)

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">OPPO</li>
    <li><input type="checkbox" name="ids[]" value="1">vivo</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";
        }
    }
}