发新贴  快速回复

全选 疑问  为什么点击input时,他父级li的mouseover和mouseout会影响input的onclick,只有把设置ali.onmouseover = null 才会有效,

张小呆
2018-04-03 13:05

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全选</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            font-size: 12px;
        }
        body{
            background: #000;
        }
        ul li{
            list-style: none;
        }
        .content{
            background: #fff;
            margin: 20px;
            width: 300px;
            color: #333;
        }
        #music li{
            border-bottom: 1px solid #e2cfcf;
            height: 30px;
            line-height: 30px;
            padding: 0 20px;
        }
        #music li:last-child{
            border-bottom: none;
        }
        span{
            display: inline-block;
            width: 150px;
        }
        em{
            font-style: normal;
        }
        #check{
            height: 40px;
            line-height: 40px;
            border-top: 1px solid #e2cfcf;
            padding: 0 20px;
            background: #ece9e9;
        }
        input{
            margin-right: 10px;
        }
        #delete{
            display: inline-block;
            text-decoration: none;
            height: 25px;
            line-height: 25px;
            margin-top: 7px;
            width: 40px;
            text-align: center;
            border: 1px solid #716a6a;
            border-radius: 3px;
            margin-left: 20px;
            color: #333;
            float: right;
        }
    </style>
</head>
<body>
<div class="content">
    <ul id="music">
        <li>
            <input type="checkbox" />
            <span>北京北京</span>
            <em>梁博</em>
        </li>
        <li>
            <input type="checkbox" />
            <span>空空如也</span>
            <em>梁博</em>
        </li>
        <li>
            <input type="checkbox" />
            <span>凉凉</span>
            <em>梁博</em>
        </li>
        <li>
            <input type="checkbox" />
            <span>北京北京</span>
            <em>梁博</em>
        </li>
    </ul>
    <p id="check">
        <input type="checkbox" id="checkAll" />全选
        <a href="javascript:;" id="delete">删除</a>
    </p>
</div>
</body>
</html>
<script>
window.err= = function(){
    var music = document.getElementById("music");
    var aLI = music.getElementsByTagName("li");
    var aInput = music.getElementsByTagName("input");
    var checkAll = document.getElementById("checkAll");
    var aColor = ['#f3f1e9', '#fefbf0'];
    var num = 0;

    //li的颜色
    for(var i=0; i<aLI.length; i++){
        aLI[i].index = i;
        aLI[i].style.background = aColor[i%aColor.length];
        aLI[i].err= = function(){
            this.style.background = '#d0cd9d';
        }
        aLI[i].err= = function(){
            this.style.background = aColor[this.index%2];
        }
    }
    //全选 点击则所有的input 是当前的checked
    checkAll.err= = function(){
        for(var i=0; i<aInput.length; i++){
            aInput[i].checked = this.checked;
        }
    }

    //点击li  背景颜色改变 再点击还原会原来的背景颜色
    for(var i=0; i<aInput.length; i++){
        aInput[i].index = i;
        aInput[i].onOff = true;
        aInput[i].err= = function(){
            if(this.onOff){
                aLI[this.index].style.background = '#d0cd9d';
                aLI[this.index].err= = null;
                aLI[this.index].err= = null;
                num++;   
                this.onOff = false;
            }else{
                aLI[this.index].style.background = aColor[this.index%2];
                aLI[this.index].err= = function(){
                    this.style.background = '#d0cd9d';
                }
                aLI[this.index].err= = function(){
                    this.style.background = aColor[this.index%2];
                }
                this.onOff = true;
                num--;
            }
            if(num == aInput.length){
                checkAll.checked = true;
            }else{
                checkAll.checked = false;
            }
        }
    }
}
</script>

 
Reci

不是很能看懂你的问题在哪里

不过你说的null去掉加上,代码都是有问题的~

你先全部选中,然后这时候全选会勾上,然后你把全选点了,在把上面的都勾上,全选就不会选中了

你可以打印你的num看看

在这里面,你点击全选取消选中的时候,要把num清除回0,并且onOff的状态也要全部回去到true

然后这时候还要注意把ali的样式去掉变回未选中的

 

2018-04-08 17:09  回复本帖
张小呆

Reci 2018-04-08 17:09发表的内容:

不是很能看懂你的问题在哪里

不过你说的null去掉加上,代码都是有问题的~

你先全部选中,然后这时候全选会勾上,然后你把全选点了,在把上面的都勾上,全选就不会选中了

你可以打印你的num看看

在这里面,你点击全选取消选中的时候,要把num清除回0,并且onOff的状态也要全部回去到true

然后这时候还要注意把ali的样式去掉变回未选中的

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>全选</title>
<style>
*{
margin: 0;
padding: 0;
font-size: 12px;
}
body{
background: #000;
}
ul li{
list-style: none;
}
.content{
background: #fff;
margin: 20px;
width: 300px;
color: #333;
}
#music li{
border-bottom: 1px solid #e2cfcf;
height: 30px;
line-height: 30px;
padding: 0 20px;
}
#music li:last-child{
border-bottom: none;
}
span{
display: inline-block;
width: 150px;
}
em{
font-style: normal;
}
#check{
height: 40px;
line-height: 40px;
border-top: 1px solid #e2cfcf;
padding: 0 20px;
background: #ece9e9;
}
input{
margin-right: 10px;
}
#delete{
display: inline-block;
text-decoration: none;
height: 25px;
line-height: 25px;
margin-top: 7px;
width: 40px;
text-align: center;
border: 1px solid #716a6a;
border-radius: 3px;
margin-left: 20px;
color: #333;
float: right;
}
</style>
</head>
<body>
<div class="content">
<ul id="music">
<li>
<input type="checkbox" />
<span>北京北京</span>
<em>梁博</em>
</li>
<li>
<input type="checkbox" />
<span>空空如也</span>
<em>梁博</em>
</li>
<li>
<input type="checkbox" />
<span>凉凉</span>
<em>梁博</em>
</li>
<li>
<input type="checkbox" />
<span>北京北京</span>
<em>梁博</em>
</li>
</ul>
<p id="check">
<input type="checkbox" id="checkAll" />全选
<a href="javascript:;" id="delete">删除</a>
</p>
</div>
</body>
</html>
<script>
window.err= = function(){
var music = document.getElementById("music");
var aLI = music.getElementsByTagName("li");
var aInput = music.getElementsByTagName("input");
var checkAll = document.getElementById("checkAll");
var aColor = ['#f3f1e9', '#fefbf0'];
var num = 0;

//li的颜色
for(var i=0; i<aLI.length; i++){
aLI[i].index = i;
aLI[i].style.background = aColor[i%aColor.length];
aLI[i].err= = function(){
this.style.background = '#d0cd9d';
}
aLI[i].err= = function(){
this.style.background = aColor[this.index%aColor.length];
}
}
//全选 点击则所有的input 是当前的checked
checkAll.err= = function(){
if(this.checked == true){
for(var i=0; i<aInput.length; i++){
aInput[i].checked = true;
aLI[i].style.background = '#d0cd9d';
}
num = aInput.length;
console.log(num);
}else if(this.checked == false){
for(var i=0; i<aInput.length; i++){
aInput[i].checked = false;
aLI[i].style.background = aColor[i%aColor.length];
}
num = 0;
console.log(num);
}
}

//点击input
for(var i=0; i<aInput.length; i++){
aInput[i].index = i;
aInput[i].err= = function(){
if(this.checked == true){
num++;
console.log(num);
aLI[this.index].style.background = '#d0cd9d';
aLI[this.index].err= = null;
this.checked == false;
}else if(this.checked == false){
num--;
console.log(num);
aLI[this.index].style.background = aColor[this.index%aColor.length];
aLI[this.index].err= = function(){
this.style.background = aColor[this.index%aColor.length];
}
this.checked == true;
}
if(num == aInput.length){
checkAll.checked = true;
}else{
checkAll.checked = false;
}
}
}
}
</script>
经过修改,已修复bug,非常谢谢您,这里我说一下自己的总结:每一个input点击时,通过让他的num++; 点击一次则加一次,当num等于他的长度时则全选选中, 选中全选时要设置num=4, 取消全选则设置num从新为0,这里我把判断条件改为this.checked根据他判断点击,感觉说的好混乱,但还是勉强做出来了
2018-04-09 15:40  回复本帖
登录 后才可以发表回复