单击单个复选框时取消选中 div 中的其他复选框答案

【问题标题】：Uncheck other checkbox in a div when a single check box is clicked单击单个复选框时取消选中 div 中的其他复选框
【发布时间】：2021-01-05 05:46:53
【问题描述】：

我有一个 div 下的复选框列表。在这种情况下，当我单击一个输入时，如何取消选中所有其他复选框？

请帮忙

jQuery(document).ready(function($) {
$('.pgggo-container-ajax-sorting').on('click', '.pgggo-list-taxon input', function() {
 alert("okay");
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="pgggo-container-ajax-sorting">
<div class="pgggo-list-taxon">
<ul>
<li><label><label><input name="pgggo-category-sep-3[]" type="checkbox" /></label></label>
<div>
<div>Category 2</div>
</div>
</li>
<li><label><label><input name="pgggo-category-sep-4[]" type="checkbox" /></label></label>
<div>
<div>Category 3</div>
</div>
</li>
<li><label><label><input name="pgggo-category-sep-2[]" type="checkbox" /></label></label>
<div>
<div>Category1</div>
</div>
</li>
<li><label><label><input name="pgggo-category-sep-1[]" type="checkbox" /></label></label>
<div>
<div>Uncategorized</div>
</div>
</li>
</ul>
</div>
</div>

【问题讨论】：

标签： javascript jquery checkbox

【解决方案1】：

您可以简单地使用.not(this).prop('checked', false) 从其他复选框中删除选中。

演示代码：

$('.pgggo-container-ajax-sorting').on('click', '.pgggo-list-taxon input', function() {
  //get checkboxes not this unchecked thm
  $(".pgggo-list-taxon").find("input[type=checkbox]").not(this)
    .prop('checked', false)

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="pgggo-container-ajax-sorting">
  <div class="pgggo-list-taxon">
    <ul>
      <li><label><label><input name="pgggo-category-sep-3[]" type="checkbox" /></label></label>
        <div>
          <div>Category 2</div>
        </div>
      </li>
      <li><label><label><input name="pgggo-category-sep-4[]" type="checkbox" /></label></label>
        <div>
          <div>Category 3</div>
        </div>
      </li>
      <li><label><label><input name="pgggo-category-sep-2[]" type="checkbox" /></label></label>
        <div>
          <div>Category1</div>
        </div>
      </li>
      <li><label><label><input name="pgggo-category-sep-1[]" type="checkbox" /></label></label>
        <div>
          <div>Uncategorized</div>
        </div>
      </li>
    </ul>
  </div>
</div>

【讨论】：

你知道，checkbox 应该可以选择多个项目。有这种行为的用户很难。

【解决方案2】：

为每个输入创建一个名为“pgggo”的类，然后使用

$('.pgggo').on('change', function() {
    if($(this)[0].checked)
            {$('.pgggo').not(this).prop('checked', false);  }
});

这是一些我希望你需要的代码 http://jsfiddle.net/EPEcono/vyh4Lcqu/4/

【讨论】：