关键词

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属性获取到所有namefruit的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的选中状态的几种方式的详细讲解。根据实际需求,我们可以选择适用于自己的方法来进行开发。

本文链接:http://task.lmcjl.com/news/8733.html

展开阅读全文