如何使用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();