文章/答案/技术大牛

发布

社区首页 >问答首页 >同一类中的jQuery复选框验证

问同一类中的jQuery复选框验证
EN

Stack Overflow用户

提问于 2021-02-19 23:42:58

回答 1查看 28关注 0票数 0

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

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

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

jquery

validation

checkbox

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-02-20 00:29:41

使用.closest()方法，您可以选中另一个复选框，以将其.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>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/66280634

复制

相似问题

问同一类中的jQuery复选框验证
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问同一类中的jQuery复选框验证EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问同一类中的jQuery复选框验证
EN