html 全选或全不选小案例 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>全选反选取消</title>
    <script>
        window.onload = function () {
            var aBtns = document.getElementsByClassName('btn');
            var aIpts = document.getElementsByTagName('input');
            for (var i=0;i<aBtns.length;i++){
                aBtns[i].onclick = function () {
                    if(this.innerHTML=='全选'){
                        for (var j=0;j<aIpts.length;j++){
                            aIpts[j].checked='checked'
                        }
                    }else if (this.innerHTML=='反选'){
                        for (var k=0;k<aIpts.length;k++){
                            //alert(aIpts[k].checked);
                            if(aIpts[k].checked){
                                aIpts[k].checked=''
                            }else{
                                aIpts[k].checked='checked'
                            }

                        }
                    }else {
                        for (var m=0;m<aIpts.length;m++){
                            aIpts[m].checked=''
                        }
                    }
                }
            }
        }
    </script>

</head>
<body>
<button id="selectAll" class="btn">全选</button>
<button id="reversePartial" class="btn">反选</button>
<button id="cancelSelect" class="btn">取消</button>
<br>
<hr>
<table border="1" style="border-collapse: collapse">
    <tr>
        <td><input type="checkbox"></td>
        <td>111</td>
        <td>111</td>
        <td>111</td>
    </tr>

    <tr>
        <td><input type="checkbox"></td>
        <td>222</td>
        <td>222</td>
        <td>222</td>
    </tr>

    <tr>
        <td><input type="checkbox"></td>
        <td>333</td>
        <td>333</td>
        <td>333</td>
    </tr>

    <tr>
       <td><input type="checkbox"></td>
        <td>444</td>
        <td>444</td>
        <td>444</td>
    </tr>
</table>

</body>
</html>

　　

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>lf</title>
<script type="text/javascript">
function selectAllOrNo(){

var choice = document.getElementById("choose");
//根据对应的状态全选或全不选
if(choice.checked==true){
selectAll();
}else{
noSelect();
}
}

function selectAll(){
var choice = document.getElementById("choose");
choice.checked=true;

//获取interest的复选框
var interests = document.getElementsByName("interest");
// 遍历
for(var i = 0; i<interests.length;i++){
var interest = interests[i];
interest.checked = true;
}
}

function noSelect(){
var choice = document.getElementById("choose");
choice.checked=false;
//获取interest的复选框
var interests = document.getElementsByName("interest");
// 遍历
for(var i = 0; i<interests.length;i++){
var interest = interests[i];
interest.checked = false;
}
}

function selectOther(){
var choice = document.getElementById("choose");
choice.checked=true;
//获取interest的复选框
var interests = document.getElementsByName("interest");
// 遍历
for(var i = 0; i<interests.length;i++){
var interest = interests[i];
interest.checked = !interest.checked;
// 如果存在未选择，则设置全选/全不选为不选择状态
checkSelect();
}

}
// 如果存在未选择，则设置全选/全不选为不选择状态
function checkSelect(){

var choice = document.getElementById("choose");
choice.checked=true;
//获取interest的复选框
var interests = document.getElementsByName("interest");
// 遍历
for(var i = 0; i<interests.length;i++){
var interest = interests[i];
// 如果存在未选择，则设置全选/全不选为不选择状态
if(interest.checked==false){
choice.checked=false;
}
}
}
</script>
</head>
<body>
你爱好的运动是？
<input type="checkbox" id="choose" onclick="selectAllOrNo()"/>全选/全不选<br>

<input type="checkbox" name="interest" value="足球" onchange="checkSelect()"/>足球
<input type="checkbox" name="interest" value="篮球" onchange="checkSelect()"/>篮球
<input type="checkbox" name="interest" value="羽毛球" onchange="checkSelect()"/>羽毛球
<input type="checkbox" name="interest" value="乒乓球" onchange="checkSelect()"/>乒乓球
<br>
<input type="button" value="全选" onclick="selectAll();"/>
<input type="button" value="全不选" onclick="noSelect();"/>
<input type="button" value="反选" onclick="selectOther();"/>
</body>
</html>

　　

posted @ 2023-10-07 10:40  十五的星星啊  阅读(66)  评论(0)    收藏  举报