js表单元素checked、radio被选中的几种方法(详解)

当我们需要在Web页面中收集用户输入时，表单是不可缺少的工具之一。而表单元素中的checkbox和radio这两种类型的输入框对于选项的选择有着重要的作用。然而，如何通过JavaScript获取选中的checkbox或radio的值呢？下面我们将详细讲解这个问题。

1. checked属性

对于单个的checkbox，我们可以通过其checked属性来检查其是否被选中：

var checkbox = document.getElementById("myCheckbox");
if (checkbox.checked) {
  console.log("Checkbox is checked");
} else {
  console.log("Checkbox is not checked");
}

这里的myCheckbox是一个id为myCheckbox的checkbox元素的id属性值。我们首先获取这个元素，然后判断其checked属性是否为true。如果为true，则说明这个checkbox已被选中。

2. 表单对象的elements属性

在一组checkbox或radio中，我们可以通过表单对象的elements属性来遍历所有的选项，并判断它们是否被选中。例如：

<form id="myForm">
  <label><input type="checkbox" name="fruit" value="apple">Apple</label>
  <label><input type="checkbox" name="fruit" value="orange">Orange</label>
  <label><input type="checkbox" name="fruit" value="banana">Banana</label>
</form>

这是一个包含三个checkbox的表单。我们可以通过以下方式获取到这些checkbox元素：

var form = document.getElementById("myForm");
var checkboxes = form.elements.fruit;

这里的fruit是checkbox元素的name属性值，它是相同的，以便它们彼此之间互相关联。我们首先获取表单元素，然后通过elements属性获取到所有name为fruit的checkbox元素。现在，checkboxes是一个NodeList对象，其中包含所有的checkbox元素。我们可以遍历这个NodeList，并检查每个元素的checked属性，以找出哪些元素被选中：

for (var i = 0; i < checkboxes.length; i++) {
  if (checkboxes[i].checked) {
    console.log(checkboxes[i].value + " is checked");
  }
}

这里使用了一个简单的for循环来遍历所有的checkbox元素。对于每个元素，我们检查其checked属性。如果为true，则说明这个选项已被选择。

3. jQuery的选择器

对于通过jQuery来操作DOM的开发者们，用jQuery选择器来获取checkbox和radio的选中状态也非常方便。

<form id="myForm">
  <label><input type="radio" name="gender" value="male">Male</label>
  <label><input type="radio" name="gender" value="female">Female</label>
  <label><input type="checkbox" name="fruit" value="apple">Apple</label>
  <label><input type="checkbox" name="fruit" value="orange">Orange</label>
  <label><input type="checkbox" name="fruit" value="banana">Banana</label>
</form>

这里即包含了一组单选按钮和一组复选框。首先我们需要在页面中导入jQuery库，然后可以通过以下方式获取选中的元素：

var selectedRadio = $("input[name='gender']:checked").val();
var selectedCheckboxes = $("input[name='fruit']:checked").map(function() {
  return $(this).val();
});
console.log("Selected radio: " + selectedRadio);
console.log("Selected checkboxes: " + selectedCheckboxes.toArray());

这里的:checked选择器用于选取被选中的单选框和复选框，而map()方法用于将选中的复选框的value属性值存储到数组中。最后，我们可以打印出选中的元素。

示例1

假设我们在一个问卷调查页面中，需要收集用户喜欢的电影类型，使用checkbox实现，如下所示：

<form id="myForm">
  <label><input type="checkbox" name="movieType" value="action">Action</label>
  <label><input type="checkbox" name="movieType" value="comedy">Comedy</label>
  <label><input type="checkbox" name="movieType" value="horror">Horror</label>
  <label><input type="checkbox" name="movieType" value="drama">Drama</label>
  <label><input type="checkbox" name="movieType" value="animation">Animation</label>
  <button onclick="submitForm()">Submit</button>
</form>

当用户点击submit按钮时，我们需要获取到所有选中的checkbox的值，并将其提交到服务器端。我们可以通过以下方式获取选中的checkbox的值：

function submitForm() {
  var form = document.getElementById("myForm");
  var checkboxes = form.elements.movieType;
  var selectedValues = [];
  for (var i = 0; i < checkboxes.length; i++) {
    if (checkboxes[i].checked) {
      selectedValues.push(checkboxes[i].value);
    }
  }
  // 通过ajax提交选中的值到服务器
  console.log(selectedValues);
}

这里的submitForm()函数将会在submit按钮被点击时被调用，获取表单元素，并遍历其中所有的checkbox元素，将被选中的元素的value属性值存储到数组中。

示例2

假设我们有一个在线投票系统，其中有两个候选人：A和B，使用radio实现。我们需要实时获取当前的投票结果，并更新页面显示。可以通过以下方式获取radio的选中状态：

<form>
  <label><input type="radio" name="vote" value="A">Candidate A</label>
  <label><input type="radio" name="vote" value="B">Candidate B</label>
</form>
<div id="result"></div>

我们先在页面中定义两个候选人的选项，然后定义一个用于显示当前结果的<div>元素。我们可以通过以下方式获取当前的投票结果：

function updateResult() {
  var selectedValue = $("input[name='vote']:checked").val();
  if (selectedValue) {   // 判断是否有选中的选项
    $("#result").text(selectedValue + " has been selected");
  } else {
    $("#result").text("No candidate has been selected");
  }
}

// 监听radio按钮的选择事件
$("input[name='vote']").on("change", updateResult);

当有人投票时，我们监听radio的选择事件，并实时更新投票结果的显示。通过$()方法选取所有name为vote的radio元素，然后使用on()方法添加一个change事件监听器，当有人投票时就会触发这个事件。在事件处理函数中，我们获取选中的radio的值，然后使用jQuery修改<div>元素的文字内容。

以上是关于获取checkbox和radio的选中状态的几种方式的详细讲解。根据实际需求，我们可以选择适用于自己的方法来进行开发。