jQuery 复选框验证相同 class

Question

我想知道我是否可以验证复选框是否可以基于每个问题（例如单选按钮）仅选择一个选项。但是，我对所有复选框使用相同的 class，即使它们具有不同的标题。

是否可以验证每个问题而不是使用 class 名称进行验证？对于每个问题，我只想单击“是”或“否”。

下面是 HTML 和 Jquery 代码。提前致谢。

--- HTML ---

    <div><label class="k-checkbox-label" >Question 1</label> 
      <input type="checkbox" id="q1_yes" class="k-checkbox">
      <label class="k-checkbox-label" >Yes</label>
      <input type="checkbox" id="q1_no" class="k-checkbox uk-margin-left">
      <label class="k-checkbox-label" >No</label>
    </div>
    <div><label class="k-checkbox-label" >Question 2</label> 
      <input type="checkbox" id="q2_yes" class="k-checkbox">
      <label class="k-checkbox-label" >Yes</label>
      <input type="checkbox" id="q2_no" class="k-checkbox uk-margin-left">
      <label class="k-checkbox-label" >No</label>
    </div>
     <div><label class="k-checkbox-label" >Question 3</label> 
      <input type="checkbox" id="q3_yes" class="k-checkbox">
      <label class="k-checkbox-label" >Yes</label>
      <input type="checkbox" id="q3_no"class="k-checkbox uk-margin-left">
      <label class="k-checkbox-label" >No</label>
    </div>
     <div><label class="k-checkbox-label" >Question 4</label> 
      <input type="checkbox" id="q4_yes" class="k-checkbox">
      <label class="k-checkbox-label" >Yes</label>
      <input type="checkbox" id="q4_no" class="k-checkbox uk-margin-left">
      <label class="k-checkbox-label" >No</label>
    </div>

---代码---

    $('input.k-checkbox').on('change', function() {
        $('input.k-checkbox').not(this).prop('checked', false);  
    });

Answer 1

使用 .closest() method, you can .find() 另一个复选框将其选中的属性设置为与单击的复选框相反。

换句话说，在下面的代码片段中，!this.checked 是点击复选框的相反布尔值...应用于另一个。

$("input.k-checkbox").on("click", function(){
  $(this).closest("div").find("input.k-checkbox").not(this).prop("checked", !this.checked)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <label class="k-checkbox-label" >Question 1</label> 
  <input type="checkbox" id="q1_yes" class="k-checkbox">
  <label class="k-checkbox-label" >Yes</label>
  <input type="checkbox" id="q1_no" class="k-checkbox uk-margin-left">
  <label class="k-checkbox-label" >No</label>
</div>
<div><label class="k-checkbox-label" >Question 2</label> 
  <input type="checkbox" id="q2_yes" class="k-checkbox">
  <label class="k-checkbox-label" >Yes</label>
  <input type="checkbox" id="q2_no" class="k-checkbox uk-margin-left">
  <label class="k-checkbox-label" >No</label>
</div>
 <div><label class="k-checkbox-label" >Question 3</label> 
  <input type="checkbox" id="q3_yes" class="k-checkbox">
  <label class="k-checkbox-label" >Yes</label>
  <input type="checkbox" id="q3_no"class="k-checkbox uk-margin-left">
  <label class="k-checkbox-label" >No</label>
</div>
 <div><label class="k-checkbox-label" >Question 4</label> 
  <input type="checkbox" id="q4_yes" class="k-checkbox">
  <label class="k-checkbox-label" >Yes</label>
  <input type="checkbox" id="q4_no" class="k-checkbox uk-margin-left">
  <label class="k-checkbox-label" >No</label>
</div>

jQuery 复选框验证相同 class

jQuery checkbox validation in same class

validation

checkbox

jquery