如何使用JS獲取Checkbox是否選中

一、checkbox的基本知識

首先，我們需要了解什麼是checkbox。Checkbox是一種HTML元素，用戶可以使用該元素來表示對於某個選項的選擇是否選中。Checkbox通常用在表單當中，以便用戶能夠提交所選的值。

<input type="checkbox" name="vehicle" value="Bike">

上面的代碼是一個例子，其中type為checkbox，value為Bike，如果用戶選擇這個checkbox，則會提交「Bike」的值。

二、獲取checkbox是否選中的方法

使用JavaScript來獲取checkbox是否選中，可以使用以下方式：

1、使用getElementById()方法獲取checkbox元素，然後檢查它的checked屬性是否為真：

var checkBox = document.getElementById("myCheckbox");
if (checkBox.checked == true){
    //checkbox is checked
} else {
    //checkbox is not checked
}

2、使用querySelector()方法獲取checkbox元素，然後檢查它的checked屬性是否為真：

var checkBox = document.querySelector("#myCheckbox");
if (checkBox.checked == true){
    //checkbox is checked
} else {
    //checkbox is not checked
}

3、使用getElementsByName()方法獲取該name屬性的所有checkbox元素，然後遍歷檢查每一個checkbox元素是否選中：

var checkBoxList = document.getElementsByName("myCheckbox");
for (var i = 0; i < checkBoxList.length; i++){
    if (checkBoxList[i].checked == true){
        //checkbox is checked
    } else {
        //checkbox is not checked
    }
}

需要注意的是，如果使用getElementsByName()方法獲取多個checkbox元素，則需要通過下標訪問每個元素的checked屬性。

三、應用場景

獲取checkbox是否選中在實際開發中非常常見，以下是一些使用場景的例子：

1、當用戶勾選了一個或多個checkbox元素時，根據勾選的選項進行操作，例如查詢關聯的數據。

var checkBoxList = document.getElementsByName("myCheckbox");
var selectedValues = [];
for (var i = 0; i < checkBoxList.length; i++){
    if (checkBoxList[i].checked == true){
        selectedValues.push(checkBoxList[i].value);
    }
}
//selectedValues包含所有被選中的value值

2、控制頁面元素的顯示和隱藏。例如，當用戶勾選checkbox時，顯示某個div元素。

var checkBox = document.getElementById("myCheckbox");
var div = document.getElementById("myDiv");
if (checkBox.checked == true){
    div.style.display = "block";
} else {
    div.style.display = "none";
}

3、表單提交時，把選中的checkbox值作為參數提交到後台。

var form = document.getElementById("myForm");
var checkBoxList = document.getElementsByName("myCheckbox");
for (var i = 0; i < checkBoxList.length; i++){
    if (checkBoxList[i].checked == true){
        var input = document.createElement("input");
        input.type = "hidden";
        input.name = "selectedValues[]";
        input.value = checkBoxList[i].value;
        form.appendChild(input);
    }
}
form.submit();

四、總結

本文主要介紹了如何使用JavaScript獲取checkbox是否選中的三種方法，同時提供了一些實際應用場景的例子。在實際開發中，獲取checkbox是否選中是非常常見的操作，希望本文能對讀者有所幫助。