javascript文字全選，反選，多選

阿新 • • 發佈：2020-11-01

1.首先還是要建立一個案例檔案

<div id="one">請選擇愛好：
    <input type="checkbox" id="check">全選/全不選
    <br>
    <input type="checkbox" name="hobby">英語
    <input type="checkbox" name="hobby">登山
    <input type="checkbox" name="hobby">游泳
    <input type="checkbox" name="hobby">閱讀
    <input type="checkbox" name="hobby">跑步
    <input type="checkbox" name="hobby">打球
    <div class="c1">
        <button class="b1" onclick="setall1()">全選</button>
        <button class="b1" onclick="setnoall()">全不選</button>
        <button class="b1" onclick="setfan()">反選</button>
        <button class="b1" onclick="take()">提交</button>

    </div>

2.先做全選

全選比較的簡單，我們只要記住input checkbox的checked物件，並對它進行使用就行了

 var hobby=document.getElementsByName("hobby");
        var whole=document.getElementById("check");


//全選
        function setall1() {
            for(let i=0;i<hobby.length;i++){
                hobby[i].checked=true;
            }
            whole.checked=true;
        }

首先我們要獲得愛好這個物件，因為前面有相同的name，所以要用

getElementsByName
全選其實很簡單就是遍歷我們這個物件的陣列，然後進行checked，注意checked是boolean

3.在做全不選
全不選和全選是一樣的思想，這裡不做過多的描述
上程式碼

function setnoall() {
    for (let i=0;i<hobby.length;i++){
        hobby[i].checked=false;
    }
    whole.checked=false;
}









4.反選，
反選的思維其實很簡單，就是我一旦選擇了這個（就是true），那我就false它

function setfan() {
    for (let i=0;i<hobby.length;i++){
        if (hobby[i].checked==true){
            hobby[i].checked=false;
        }else if (hobby[i].checked==false){
            hobby[i].checked=true;
        }
        
}











5.input之全選和全不選
這裡的

hobby[i].onclick=function () {
    whole.checked=true;
    for (let j=0;j<hobby.length;j++){
        if(hobby[j].checked==false){
            whole.checked=false;

            //一旦進入判斷就得出結果,登山沒有選擇的話，迴圈就直接結束
            break;
        }

解釋一下，我們點選的的時候，先把他們全部選中，在進入for迴圈進行遍歷，如果
有一個沒有選中，那就是直接返回false。

whole.onclick=function () {


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

//如果四個多選框全部選擇，上面的whole也選中
for (let i=0;i<hobby.length;i++){


hobby[i].onclick=function () {
    whole.checked=true;
    for (let j=0;j<hobby.length;j++){
        if(hobby[j].checked==false){
            whole.checked=false;

            //一旦進入判斷就得出結果,登山沒有選擇的話，迴圈就直接結束
            break;
        }
    }
}