JS多選框選中與取消解析

一、js多選框選中與取消

在網頁開發中，常用的表單控制項之一是多選框。一般情況下，我們使用滑鼠點擊多選框來進行選中和取消選中操作。但是，在某些情境下，我們需要通過js代碼來進行多選框的選中和取消。下面是示例代碼：

  <input type="checkbox" id="checkbox1" name="checkbox1" />
  <input type="checkbox" id="checkbox2" name="checkbox2" />
  <input type="checkbox" id="checkbox3" name="checkbox3" />

  <script>
    // js代碼
    var checkbox1 = document.getElementById("checkbox1");
    var checkbox2 = document.getElementById("checkbox2");
    var checkbox3 = document.getElementById("checkbox3");

    checkbox1.checked = true;  //選中
    checkbox2.checked = false; //取消選中
  </script>

以上代碼中，我們使用了getElementById方法獲取了三個多選框的引用，然後在js代碼中對其進行了選中和取消選中操作。checkbox.checked屬性代表該多選框是否被選中，true代表選中，false代表未選中。

二、js多選框默認選中事件

在實際開發中，我們可能需要對多選框進行默認選中操作。在html中，我們可以通過在多選框的input標籤中添加checked屬性來進行默認選中。下面是示例代碼：

  <input type="checkbox" id="checkbox1" name="checkbox1" checked />
  <input type="checkbox" id="checkbox2" name="checkbox2" />
  <input type="checkbox" id="checkbox3" name="checkbox3" checked />

  <script>
    // js代碼
    var checkbox1 = document.getElementById("checkbox1");
    var checkbox2 = document.getElementById("checkbox2");
    var checkbox3 = document.getElementById("checkbox3");

    // 選中和取消選中代碼同上
  </script>

上面代碼中，我們在checkbox1和checkbox3多選框的input標籤中添加了checked屬性，表示這兩個多選框默認選中。通過js代碼獲取到多選框引用後，對其進行選中和取消選中操作，與前面示例代碼中一致。

三、js獲取多選框選中的值

在表單提交時，我們可能需要獲取多選框選中的值，這個時候我們需要用到js。下面是示例代碼：

  <input type="checkbox" id="checkbox1" name="fruit" value="apple" /> 
  <label for="checkbox1">蘋果</label>
  <input type="checkbox" id="checkbox2" name="fruit" value="banana" /> 
  <label for="checkbox2">香蕉</label>
  <input type="checkbox" id="checkbox3" name="fruit" value="orange" /> 
  <label for="checkbox3">橘子</label>

  <button onclick="getChecked()">獲取選中值</button>

  <script>
    // js代碼
    function getChecked() {
      var checkbox = document.getElementsByName("fruit");
      var result = [];

      for (var i = 0; i < checkbox.length; i++) {
        if (checkbox[i].checked) {
          result.push(checkbox[i].value);
        }
      }

      alert(result.join(",")); //輸出選中結果
    }
  </script>

上面代碼中，我們通過getElementsByTagName方法獲取了name屬性為”fruit”的多選框，並使用for循環來遍歷每個多選框，如果該多選框被選中，則將其value值加入到result數組中。最後使用alert函數輸出選中結果。

四、js控制複選框取消選中

我們可能需要在某些情況下，控制某個多選框不被選中。下面是示例代碼：

  <input type="checkbox" id="checkbox1" name="checkbox1" />
  <input type="checkbox" id="checkbox2" name="checkbox2" />
  <input type="checkbox" id="checkbox3" name="checkbox3" />

  <button onclick="uncheck()">取消選中</button>

  <script>
    // js代碼
    function uncheck() {
      var checkbox2 = document.getElementById("checkbox2");
      checkbox2.checked = false;
    }
  </script>

上面代碼中，我們使用getElementById方法獲取了checkbox2的引用，並在js代碼中對其進行了取消選中的操作。

五、js單選框取消選中

與多選框不同，單選框一次只能選中一個選項，在選中一個選項之後，其他選項應該自動取消選中。下面是示例代碼：

  <input type="radio" name="gender" value="male" checked />
  <label>男</label>
  <input type="radio" name="gender" value="female" />
  <label>女</label>

  <script>
    // js代碼
    var radio = document.getElementsByName("gender");

    for (var i = 0; i < radio.length; i++) {
      radio[i].onclick = function() {
        for (var j = 0; j < radio.length; j++) {
          if (radio[j] != this) {
            radio[j].checked = false;
          }
        }
      }
    }
  </script>

上面代碼中，我們使用getElementsByName方法獲取了name屬性為”gender”的兩個單選框，然後使用for循環遍歷每個單選框。在遍歷的過程中，我們給每個單選框綁定了一個onclick事件，當該單選框被點擊時，使用for循環遍歷除該單選框之外的其他單選框，並將其取消選中。

六、js獲取多選框是否選中

在某些情況下，我們需要通過js代碼來獲取多選框的選中狀態，判斷其是否被選中。下面是示例代碼：

  <input type="checkbox" id="checkbox1" name="checkbox1" checked />
  <input type="checkbox" id="checkbox2" name="checkbox2" />
  <input type="checkbox" id="checkbox3" name="checkbox3" />

  <button onclick="getStatus()">獲取狀態</button>

  <script>
    // js代碼
    function getStatus() {
      var checkbox1 = document.getElementById("checkbox1");
      var checkbox2 = document.getElementById("checkbox2");
      var checkbox3 = document.getElementById("checkbox3");

      alert(checkbox1.checked); // true
      alert(checkbox2.checked); // false
      alert(checkbox3.checked); // false
    }
  </script>

上面代碼中，我們使用getElementById方法獲取了三個多選框的引用，並在js代碼中通過checkbox.checked屬性來獲取多選框的狀態。

七、js設置多選框不選中

有時候，我們需要通過js代碼來將多選框恢復到未選中狀態。下面是示例代碼：

  <input type="checkbox" id="checkbox1" name="checkbox1" checked />
  <input type="checkbox" id="checkbox2" name="checkbox2" checked />
  <input type="checkbox" id="checkbox3" name="checkbox3" checked />

  <button onclick="uncheckAll()">全部取消</button>

  <script>
    // js代碼
    function uncheckAll() {
      var checkbox = document.getElementsByName("checkbox");

      for (var i = 0; i < checkbox.length; i++) {
        checkbox[i].checked = false;
      }
    }
  </script>

上面代碼中，我們使用getElementsByName方法獲取了name屬性為”checkbox”的所有多選框，並使用for循環遍歷每個多選框，將其設置為未選中狀態。

八、js取消checkbox選中

除了多選框和單選框，我們還有一種常用的表單控制項是checkbox，它也需要經常進行選中和取消選中的操作。下面是示例代碼：

  <input type="checkbox" id="checkbox" />

  <button onclick="uncheck()">取消選中</button>

  <script>
    // js代碼
    function uncheck() {
      var checkbox = document.getElementById("checkbox");
      checkbox.checked = false;
    }
  </script>

上面代碼中，我們使用getElementById方法獲取了checkbox的引用，並在js代碼中將其設置為未選中狀態。

九、js取消radio選中

和多選框一樣，我們也需要對單選框進行取消選中操作。下面是示例代碼：

  <input type="radio" id="radio1" name="radio" value="male" checked />
  <label for="radio1">男</label>
  <input type="radio" id="radio2" name="radio" value="female" />
  <label for="radio2">女</label>

  <button onclick="uncheck()">取消選中</button>

  <script>
    // js代碼
    function uncheck() {
      var radio = document.getElementsByName("radio");

      for (var i = 0; i < radio.length; i++) {
        if (radio[i].checked) {
          radio[i].checked = false;
        }
      }
    }
  </script>

上面代碼中，我們使用getElementsByName方法獲取了name屬性為”radio”的所有單選框，並使用for循環遍歷每個單選框，將其設置為未選中狀態。