全选与反选功能

...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>购物车的全选全不选反选</h1>

<ul>
    <li><input type="checkbox" name="" id="">小艳艳</li>
    <li><input type="checkbox" name="" id="">小艳艳</li>
    <li><input type="checkbox" name="" id="">小艳艳</li>
    <li><input type="checkbox" name="" id="">小艳艳</li>
    <li><input type="checkbox" name="" id="">小艳艳</li>
    <li><input type="checkbox" name="" id="">小艳艳</li>
    <li><input type="checkbox" name="" id="">小艳艳</li>
    <li><input type="checkbox" name="" id="">小艳艳</li>
    <li><input type="checkbox" name="" id="">小艳艳</li>
    <li><input type="checkbox" name="" id="">小艳艳</li>
    <li><input type="checkbox" name="" id="">小艳艳</li>
    <li><input type="checkbox" name="" id="">小艳艳</li>
</ul>
<button id='qx'>全选</button>
<button id="no">全不选</button>
<button id='fx'>反选</button>
<!-- 提供思路 1.获取所有input的集合。  2遍历  3.改变input框中checked的值（true | false） -->

</body>
<script>
window.onload=function(){
var qx1=document.getElementById('qx');
var no1=document.getElementById('no');
var fx1=document.getElementById('fx');
var oInput=document.getElementsByTagName('input');
qx1.onclick=function(){
for (var i = 0; i < oInput.length; i++) {
oInput[i].checked=true;
}
}
no1.onclick=function(){
for (var i = 0; i < oInput.length; i++) {
oInput[i].checked=false;
}
}
fx1.onclick=function(){
for (var i = 0; i < oInput.length; i++) {
if(oInput[i].checked){
oInput[i].checked=false;
}else{
oInput[i].checked=true;
}
}
}
}
</script>
</html>
...

全选与反选功能

推荐阅读更多精彩内容