同Class下基于jQuery实现按独立问题维度的Checkbox单选验证需求问询

嗨，我明白你现在的问题——当前的jQuery代码会全局取消所有.k-checkbox的选中状态，导致跨问题的选项也被清空，没法实现单个问题内Yes/No二选一的效果。咱们来调整一下代码，把控制范围限定在每个独立的问题容器里就行：

问题根源分析 #

原来的代码$('input.k-checkbox').not(this).prop('checked', false)会选中页面上所有.k-checkbox元素，除了当前点击的那个，这就导致不同问题的选项互相干扰了。我们需要把操作范围缩小到当前点击元素所在的父级<div>（也就是单个问题的容器）内。

修正后的jQuery代码 #

$('input.k-checkbox').on('change', function() {
  // 定位到当前复选框所属的单个问题容器
  const $currentQuestion = $(this).closest('div');
  // 仅取消当前问题容器内的其他复选框选中状态
  $currentQuestion.find('input.k-checkbox').not(this).prop('checked', false);
});

代码逻辑解释 #

• $(this).closest('div')：找到当前点击复选框最近的父级<div>，精准锁定单个问题的范围，避免影响其他问题。
• $currentQuestion.find('input.k-checkbox')：只在当前问题容器内查找复选框，而不是全局遍历。
• .not(this).prop('checked', false)：取消当前问题内除了点击项之外的其他复选框选中状态，完美实现单个问题的二选一。

额外语义化优化建议 #

其实从HTML语义角度来说，单选场景更适合用<input type="radio">，它本身就自带同组单选的特性（只需要给同组radio设置相同的name属性），完全不需要JS辅助。比如可以把HTML改成这样：

<div>
  <label class="k-checkbox-label">Question 1</label>
  <input type="radio" id="q1_yes" name="question1" class="k-radio">
  <label class="k-checkbox-label" for="q1_yes">Yes</label>
  <input type="radio" id="q1_no" name="question1" class="k-radio uk-margin-left">
  <label class="k-checkbox-label" for="q1_no">No</label>
</div>
<div>
  <label class="k-checkbox-label">Question 2</label>
  <input type="radio" id="q2_yes" name="question2" class="k-radio">
  <label class="k-checkbox-label" for="q2_yes">Yes</label>
  <input type="radio" id="q2_no" name="question2" class="k-radio uk-margin-left">
  <label class="k-checkbox-label" for="q2_no">No</label>
</div>
<!-- 其余问题依此类推 -->

这样既符合HTML标准，又减少了JS依赖，不过如果项目有硬性要求必须用Checkbox，那前面的jQuery方案完全可以满足你的需求。

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