如何获取checkbox的值？修改样式后radio box值无法获取怎么办？

我来帮你解决这两个前端表单里的常见问题～

不管是单个还是多组复选框，都可以通过原生JS或框架轻松取值，分情况说明：

单个Checkbox的取值方法 #

如果只需要判断单个复选框是否选中并获取值，直接操作原生元素即可：

// 通过ID获取复选框元素
const checkbox = document.getElementById('your-checkbox-id');
// 先判断是否被选中
if (checkbox.checked) {
  console.log('当前选中的值是：', checkbox.value);
} else {
  console.log('这个复选框未被选中');
}

多个同name的Checkbox取值 #

如果是一组同name的复选框（比如兴趣选择），需要收集所有被选中的值：

// 获取所有被选中的复选框
const checkedBoxes = document.querySelectorAll('input[name="hobbies"]:checked');
// 把NodeList转换成数组，提取每个复选框的value
const selectedValues = Array.from(checkedBoxes).map(box => box.value);
console.log('所有选中的复选框值：', selectedValues);

如果用jQuery的话，写法会更简洁：

// 单个复选框
if ($('#your-checkbox-id').is(':checked')) {
  console.log('选中的值：', $('#your-checkbox-id').val());
}
// 多个复选框
const selectedValues = $('input[name="hobbies"]:checked').map(function() {
  return $(this).val();
}).get();

这个坑很多人都踩过！自定义单选框样式时，若隐藏原生radio的方式不对，会导致原生元素的选中状态无法同步，进而取不到值。给你分析常见原因和解决办法：

1. 别用display:none隐藏原生Radio #

直接用display:none藏原生radio，会让部分浏览器无法正确识别它的选中状态。推荐用以下方式隐藏，既看不到原生元素，又能保证它在文档流中正常工作：

.custom-radio input[type="radio"] {
  opacity: 0;
  position: absolute;
  z-index: -1;
  /* 也可以用clip属性：clip: rect(0 0 0 0); */
}

然后用相邻兄弟选择器给伪元素加样式，示例结构：

<label class="custom-radio">
  <input type="radio" name="gender" value="male">
  <span class="radio-dot"></span>
  男
</label>
<label class="custom-radio">
  <input type="radio" name="gender" value="female">
  <span class="radio-dot"></span>
  女
</label>

.custom-radio .radio-dot {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid #ccc;
  border-radius: 50%;
  margin-right: 8px;
  position: relative;
}
/* 选中时的填充样式 */
.custom-radio input[type="radio"]:checked + .radio-dot::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #2196F3;
}

这样原生radio依然存在，JS取值和普通单选框完全一样：

const selectedRadio = document.querySelector('input[name="gender"]:checked');
if (selectedRadio) {
  console.log('选中的单选框值：', selectedRadio.value);
}

2. 检查点击事件是否阻止了原生状态更新 #

如果你给自定义伪元素加了点击事件，且用了preventDefault()或stopPropagation()，可能会导致原生radio的选中状态无法触发。解决办法是在自定义元素的点击事件中，手动触发原生radio的click()：

document.querySelectorAll('.radio-dot').forEach(dot => {
  dot.addEventListener('click', function() {
    const radio = this.previousElementSibling;
    radio.click(); // 触发原生radio的点击，同步选中状态
  });
});

3. 确认取值代码没写错 #

不管样式怎么改，只要原生radio的name属性正确、选中状态正常，取值逻辑和普通单选框完全一致，别因为改了样式就乱了取值方法哦～

内容的提问来源于stack exchange，提问作者Salman Iqbal