如何获取checked选中的值？

获取checked选中的值是前端开发中常见的操作，主要用于处理复选框（checkbox）、单选按钮（radio）等表单元素的选中状态，不同场景下获取选中值的方法略有差异，需结合HTML结构、JavaScript语法及实际需求灵活选择，以下是详细操作指南，涵盖原生JavaScript、jQuery框架及现代前端框架（如Vue、React）的实现方式,并附常见问题解答。

原生JavaScript实现

原生JavaScript无需额外库，可直接通过DOM操作获取选中值，根据元素数量和结构,分为以下几种情况：

单个复选框或单选按钮

单个元素可通过checked属性判断选中状态，value属性获取值：

<input type="checkbox" id="agree" value="同意条款"> 我同意条款
<script>
  const checkbox = document.getElementById('agree');
  if (checkbox.checked) {
    console.log('选中值：', checkbox.value);
  } else {
    console.log('未选中');
  }
</script>

同组复选框（多选）

多个同组复选框需通过遍历集合获取所有选中值：

<input type="checkbox" name="hobby" value="阅读"> 阅读
<input type="checkbox" name="hobby" value="运动"> 运动
<input type="checkbox" name="hobby" value="音乐"> 音乐
<script>
  const checkboxes = document.getElementsByName('hobby');
  const selectedValues = [];
  checkboxes.forEach(checkbox => {
    if (checkbox.checked) {
      selectedValues.push(checkbox.value);
    }
  });
  console.log('选中值：', selectedValues); // 输出数组：["阅读", "音乐"]
</script>

通过类名或选择器批量获取

若元素有统一类名，可使用querySelectorAll结合选择器筛选：

<input type="checkbox" class="item" value="A"> A
<input type="checkbox" class="item" value="B"> B
<script>
  const items = document.querySelectorAll('.item:checked'); // :checked伪类筛选已选中项
  const values = Array.from(items).map(item => item.value);
  console.log('选中值：', values);
</script>

表单元素集合提交

在表单提交时，可通过FormData对象自动收集所有选中值（适用于表单内元素）：

<form id="myForm">
  <input type="checkbox" name="options" value="选项1"> 选项1
  <input type="checkbox" name="options" value="选项2"> 选项2
  <button type="submit">提交</button>
</form>
<script>
  document.getElementById('myForm').addEventListener('submit', (e) => {
    e.preventDefault();
    const formData = new FormData(e.target);
    const selectedValues = formData.getAll('options'); // 获取同名name的所有值
    console.log('表单选中值：', selectedValues);
  });
</script>

jQuery框架实现

jQuery简化了DOM操作，语法更简洁,适合快速开发：

单个元素

if ($('#agree').is(':checked')) {
  console.log('选中值：', $('#agree').val());
}

同组复选框（多选）

const selectedValues = [];
$('input[name="hobby"]:checked').each(function() {
  selectedValues.push($(this).val();
});
console.log('选中值：', selectedValues);

通过类名批量获取

const values = $('.item:checked').map(function() {
  return $(this).val();
}).get(); // 转换为数组
console.log('选中值：', values);

现代前端框架实现

Vue.js

Vue通过v-model双向绑定自动管理选中值,无需手动获取：

<template>
  <div>
    <input type="checkbox" v-model="selectedHobbies" value="阅读"> 阅读
    <input type="checkbox" v-model="selectedHobbies" value="运动"> 运动
    <p>选中值：{{ selectedHobbies }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      selectedHobbies: [] // 数组存储多选值
    };
  }
};
</script>

React

React使用useState管理状态,通过事件处理函数更新：

import { useState } from 'react';
function App() {
  const [selectedValues, setSelectedValues] = useState([]);
  const handleChange = (e) => {
    const { value, checked } = e.target;
    if (checked) {
      setSelectedValues([...selectedValues, value]);
    } else {
      setSelectedValues(selectedValues.filter(v => v !== value));
    }
  };
  return (
    <div>
      <input type="checkbox" value="阅读" onChange={handleChange} /> 阅读
      <input type="checkbox" value="运动" onChange={handleChange} /> 运动
      <p>选中值：{JSON.stringify(selectedValues)}</p>
    </div>
  );
}

常见问题对比

以下表格总结了不同场景下的适用方法：

相关问答FAQs

Q1: 如何获取动态添加的复选框的选中值？
A1: 动态元素需通过事件委托（Event Delegation）绑定事件,例如原生JavaScript中利用事件冒泡机制：

document.addEventListener('change', (e) => {
  if (e.target.matches('.dynamic-checkbox')) {
    if (e.target.checked) {
      console.log('动态选中值：', e.target.value);
    }
  }
});

jQuery中可使用$(document).on('change', '.dynamic-checkbox', function() {...})。

Q2: 复选框选中值如何转换为逗号分隔的字符串？
A2: 遍历选中元素后，使用join()方法拼接字符串,原生JavaScript示例：

const checkboxes = document.querySelectorAll('input[name="hobby"]:checked');
const valuesStr = Array.from(checkboxes).map(cb => cb.value).join(',');
console.log('拼接结果：', valuesStr); // 输出："阅读,音乐"

jQuery中可直接链式调用：$('input[name="hobby"]:checked').map().get().join(',')。