JavaScript中獲得CheckBox狀態(tài)的方法小結

更新時間：2025年03月11日 08:49:41 作者：Epicurus

在 JavaScript 中,獲取復選框（CheckBox）的狀態(tài)（選中或未選中）可以通過以下幾種方式實現(xiàn),以下是具體方法及示例,并通過代碼示例介紹的非常詳細,需要的朋友可以參考下

JavaScript中獲得CheckBox狀態(tài)的方法

1. 使用 checked 屬性

checked 屬性是復選框元素的布爾屬性，表示復選框是否被選中。

示例：

<input type="checkbox" id="myCheckbox"> 同意協(xié)議
<button onclick="checkStatus()">檢查狀態(tài)</button>

<script>
function checkStatus() {
    const checkbox = document.getElementById("myCheckbox");
    if (checkbox.checked) {
        console.log("復選框已選中");
    } else {
        console.log("復選框未選中");
    }
}
</script>

2. 使用 querySelector 獲取復選框

通過 querySelector 獲取復選框元素，然后訪問 checked 屬性。

示例：

<input type="checkbox" class="myCheckbox"> 同意協(xié)議
<button onclick="checkStatus()">檢查狀態(tài)</button>

<script>
function checkStatus() {
    const checkbox = document.querySelector(".myCheckbox");
    console.log(checkbox.checked ? "選中" : "未選中");
}
</script>

3. 獲取多個復選框的狀態(tài)

如果有多個復選框，可以通過 querySelectorAll 獲取所有復選框，然后遍歷檢查狀態(tài)。

示例：

<input type="checkbox" class="myCheckbox" value="1"> 選項 1
<input type="checkbox" class="myCheckbox" value="2"> 選項 2
<input type="checkbox" class="myCheckbox" value="3"> 選項 3
<button onclick="checkStatus()">檢查狀態(tài)</button>

<script>
function checkStatus() {
    const checkboxes = document.querySelectorAll(".myCheckbox");
    checkboxes.forEach(checkbox => {
        console.log(`選項 ${checkbox.value}: ${checkbox.checked ? "選中" : "未選中"}`);
    });
}
</script>

4. 使用 addEventListener 監(jiān)聽狀態(tài)變化

通過 addEventListener 監(jiān)聽復選框的 change 事件，實時獲取狀態(tài)。

示例：

<input type="checkbox" id="myCheckbox"> 同意協(xié)議

<script>
const checkbox = document.getElementById("myCheckbox");
checkbox.addEventListener("change", function() {
    console.log(this.checked ? "復選框已選中" : "復選框未選中");
});
</script>

5. 使用表單數(shù)據(jù)獲取狀態(tài)

如果復選框位于表單中，可以通過 FormData 獲取復選框的狀態(tài)。

示例：

<form id="myForm">
    <input type="checkbox" name="agree" value="yes"> 同意協(xié)議
    <button type="button" onclick="checkStatus()">檢查狀態(tài)</button>
</form>

<script>
function checkStatus() {
    const form = document.getElementById("myForm");
    const formData = new FormData(form);
    console.log(formData.get("agree") === "yes" ? "選中" : "未選中");
}
</script>

6. 使用 :checked 偽類選擇器

通過 querySelector 結合 :checked 偽類選擇器獲取選中的復選框。

示例：

<input type="checkbox" class="myCheckbox"> 選項 1
<input type="checkbox" class="myCheckbox"> 選項 2
<input type="checkbox" class="myCheckbox"> 選項 3
<button onclick="checkStatus()">檢查狀態(tài)</button>

<script>
function checkStatus() {
    const checkedBoxes = document.querySelectorAll(".myCheckbox:checked");
    checkedBoxes.forEach(checkbox => {
        console.log(`選中: ${checkbox.value}`);
    });
}
</script>

7. 使用 jQuery（如果已引入）

如果項目中引入了 jQuery，可以使用其簡化操作。

示例：

<input type="checkbox" id="myCheckbox"> 同意協(xié)議
<button onclick="checkStatus()">檢查狀態(tài)</button>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
function checkStatus() {
    const isChecked = $("#myCheckbox").is(":checked");
    console.log(isChecked ? "選中" : "未選中");
}
</script>

總結

方法	適用場景	示例
`checked` 屬性	獲取單個復選框狀態(tài)	`checkbox.checked`
`querySelector`	獲取單個復選框狀態(tài)	`document.querySelector()`
`querySelectorAll`	獲取多個復選框狀態(tài)	`document.querySelectorAll()`
`addEventListener`	監(jiān)聽復選框狀態(tài)變化	`checkbox.addEventListener()`
`FormData`	獲取表單中復選框狀態(tài)	`new FormData(form)`
`:checked` 偽類選擇器	獲取選中的復選框	`querySelectorAll(":checked")`
`jQuery`	簡化操作（需引入 jQuery）	`$("#myCheckbox").is(":checked")`