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">OPPOli>
    <li><input type="checkbox" name="ids[]" value="1">vivoli>
    <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"true";
    }
}
//全不选方法
function selectNall(){
    for(var i=0;i"";
    }
}
//反选方法
function selectRev(){
    for(var i=0;iif(all[i].checked){
            all[i].checked="";
        }else{
            all[i].checked="true";
        }
    }
}