用原生js实现反选与全选的小功能

HTML 部分:

<form>
<input type="checkbox" name="che" onclick="selectAll()">全选
<input type="checkbox" name="che" onclick="func1(this)"/>全选
<input type="checkbox" name="che1" onclick="func3()"/>全不选
<input type="checkbox" name="che2" onclick="func4()"/>反选
<br />
<input type="checkbox" name="cb"/>1
<br />
<input type="checkbox"  name="cb"/>2
<br />
<input type="checkbox"  name="cb"/>3
<br />
<input type="checkbox"  name="cb"/>4
</form>	

JS 部分:

//点击全选4个选项全被选中;否则全不被选中;
function selectAll(){
//获取全选复选框是否被选中的值
var ches=document.getElementsByName("che");
//得到4个复选框对象
var arr=document.getElementsByName("cb");
//遍历数组,依次设置复选框对象的checked属性的值
for(var i=0;i<arr.length;i++){
arr[i].checked=ches[0].checked;
}
}
//第二种方法:点击全选4个选项全被选中;否则全不被选中;
function func1(obj){
var arr=document.getElementsByName("cb");
for(var i=0;i<arr.length;i++){
arr[i].checked=obj.checked;
}
}
//点击全不选,则不选;
function func3(){
var arr=document.getElementsByName("cb");
for(var i=0;i<arr.length;i++){
arr[i].checked=false;
}
}
//点击反选;
function func4(){
var arr=document.getElementsByName("cb");
for(var i=0;i<arr.length;i++){
arr[i].checked=!arr[i].checked;
}
}

猜你喜欢

转载自blog.csdn.net/soulcabin/article/details/80059599