同一类中的 jQuery 复选框验证

Posted 2023-05-09

【中文标题】同一类中的 jQuery 复选框验证

【英文标题】：jQuery checkbox validation in same class

【发布时间】：2021-05-22 15:00:41

【问题描述】：

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

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

下面是 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);  
    );

【问题讨论】：

“像单选按钮” - 为什么不使用...单选按钮？ 最不意外的路径 - “哦，这里有一些复选框，我可以单击多个...为什么其他 复选框 没有被选中？*

感谢您的评论。是的，这与单选按钮的操作相同。但出于某种原因，我需要使用该复选框。对于每个问题，我只想单击是或否。

仅供参考，您始终可以将单选按钮设置为 看起来像 复选框（如果您真的必须） - 关键是如果您使用正确的控件，那么您将不需要 任何代码。

感谢您的评论，我需要讨论一下 :)

【参考方案1】：

使用.closest() 方法，您可以.find() 另一个复选框将其选中的属性设置为与单击的那个相反的属性。

换句话说，在下面的 sn-p 中，!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>

【讨论】：

非常感谢！它工作得很好。 :)