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

Question

我在 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>

Answer 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>

Answer 2

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

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

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

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

Uncheck other checkbox in a div when a single check box is clicked

javascript

checkbox

jquery