js获取复选框选中的值(JavaScript获取复选框值)

什么是复选框？

复选框（Checkbox）是HTML表单中常见的元素，用于允许用户选择多个选项或表达多个选择。复选框通常与标签和表单控件一起使用，以便为用户提供简易的交互式输入。每个复选框选项都有一个值，可以在提交表单时一起发送到服务器进行处理。

如何使用JavaScript获取复选框值？

使用JavaScript可以轻松地获取复选框选中的值。首先，需要获取对复选框元素的引用。可以使用getElementById、getElementsByTagName或querySelectorAll等方法获取对元素的引用。例如，在HTML中，有一个ID为“chkbx” 的复选框元素：

<input type="checkbox" id="chkbx" value="option1">

在JavaScript中，可以使用以下代码获取对该元素的引用：

var chkbox = document.getElementById("chkbx");

获取复选框的值

要获取复选框的值，可以使用checked属性。该属性返回一个Boolean值，指示复选框是否选定。例如，要检查复选框是否选定，可以使用以下代码：

if(chkbox.checked){

   // 复选框已选中
}

要得到选中的复选框的值，可以在HTML中使用value属性指定复选框的值，并使用checked属性检查复选框是否选定。例如，以下复选框中有两个选项：

<input type="checkbox" id="chk1" value="option1">

<input type="checkbox" id="chk2" value="option2">

要获取选中的复选框值，请使用以下代码：

var chk1 = document.getElementById("chk1");

var chk2 = document.getElementById("chk2");
if(chk1.checked){
   var value1 = chk1.value;
}
if(chk2.checked){
   var value2 = chk2.value;
}

此时，变量value1和value2将包含选中的复选框的值。

获取多个复选框的值

如果有多个复选框元素，可以使用循环结构来轻松地获取它们的值。例如，以下HTML代码中有三个复选框：

<input type="checkbox" id="chk1" value="option1">

<input type="checkbox" id="chk2" value="option2">
<input type="checkbox" id="chk3" value="option3">

要获取选中的复选框值，请使用以下代码：

var checkboxes = document.querySelectorAll('input[type="checkbox"]');

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

此时，变量values将包含所有选定的复选框的值。

总结

复选框在HTML表单中扮演着重要的角色，它可以允许用户选择多个选项或表达多个选择。使用JavaScript可以轻松地获取复选框选中的值，可以通过获取对复选框元素的引用，使用checked属性来检查复选框是否选定，并使用value属性获取复选框的值。如果有多个复选框元素，可以使用循环结构来轻松地获取它们的值。