您的位置：首页 > 其它

checkbox的全选与反选

2015-08-08 17:28 330 查看

需求：

1.当all选项勾选时，所有选项都被勾选，反正当所有选项被选中时，全选选项自动选中

2.点击反选按钮时，被选中的选项取消选中，未被选中的选项被选中

Html结构

<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
all<input id="all" type="checkbox" onclick="check()">
<button type="button" onclick="fanx()">反选</button>

首先，我们得到我们要控制的元素，并且用for循环给每个checkbox绑定点击事件：

var all=document.getElementById("all")
var box=document.getElementsByTagName("input") //此处选中了所有的input,包括全选按钮本身，在后面的操作中需要注意

for (i = 0; i < box.length-1; i++) {
box[i].onclick = onclike
}

1.全选

分析：我们让每个checkbox的checked属性都等于全选的checked属性，则可实现全选和全不选的操作，代码如下：

function check() {
　　for (i = 0; i < box.length-1; i++) {
　　box[i].checked = all.checked
　　}
}

2.反向全选

分析：

方案一：通过变量j来计算有多少选项被选中，如果被选中的个数等于总个数，则全选的checked属性为true，代码如下：

function onclike() {
var j=0
for (i = 0; i < box.length - 1; i++) {
　　if (box[i].checked) {
　　j++
　　}
}

all.checked=(j==box.length-1)
　　　　/*if(j==box.length-1)
　　　　{
　　　　all.checked=true
　　　　}

　　　　else
　　　　　{
　　　　all.checked=false
　　　　 }*/
}

方案二：只要有一个选项未被选择中，则全选属性为false,通过逻辑与的方式将每个选项的布尔值与之前比较，代码如下：

function onclike()

{

var flag=true

for (i = 0; i < box.length - 1; i++) {

var ifChecke = box[i].checked

flag = flag && ifChecke

}

all.checked=flag

}

3.反选

分析：当checked为true为真时，使其为false,否则为true,代码如下：

function fanx(){

for (i = 0; i < box.length-1; i++)

{

if(box[i].checked){

box[i].checked=false

}

else

{

box[i].checked=true

}

}

}

————————————————————————————————————————————————————————————————————————————

完整代码

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>

<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
all<input id="all" type="checkbox" onclick="check()">
<button type="button" onclick="fanx()">反选</button>
</body>
<script type="text/javascript">
var all=document.getElementById("all")
var box=document.getElementsByTagName("input")

for (i = 0; i < box.length-1; i++) {
box[i].onclick = onclike
}

//通过变量j来计算有多少选项被选中，如果被选中的个数等于总个数，则全选的checked属性为true
function onclike2() {
var j=0
for (i = 0; i < box.length - 1; i++) {
if (box[i].checked) {
j++
}
}

all.checked=(j==box.length-1)
/*if(j==box.length-1)
{
all.checked=true
}

else
{
all.checked=false
}*/
}
//只要有一个选项未被选择中，则全选属性为false,通过逻辑与的方式将每个选项的布尔值与之前比较
function onclike()
{
var flag=true
for (i = 0; i < box.length - 1; i++) {
var ifChecke = box[i].checked
flag = flag && ifChecke
}
all.checked=flag
}

function check() {
for (i = 0; i < box.length-1; i++) {
box[i].checked = all.checked
}
}

function fanx(){

for (i = 0; i < box.length-1; i++)
{
if(box[i].checked){
box[i].checked=false
}
else
{
box[i].checked=true
}

}

}

</script>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航