Question

我有几个这样的复选框：

<div class="col-sm-12">
        <div class="col-sm-4">
            <div class="checkbox checkbox-default">
                <input type="checkbox" name="RAT_RoomList[]" value="10">
                <label for="custome-checkbox1"># 11</label>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="checkbox checkbox-default">
                <input type="checkbox" name="RAT_RoomList[]" value="11">
                <label for="custome-checkbox2"># 12</label>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="checkbox checkbox-default">
                <input type="checkbox" name="RAT_RoomList[]" value="12">
                <label for="custome-checkbox3"># 13</label>
            </div>
        </div>
        <div class="col-sm-12">
            <div class="checkbox checkbox-default">
                <input type="checkbox" class="selectAll">
                <label for="custome-checkbox">Select all</label>
            </div>
        </div>
</div>

如果选中Select all时如何取消选中所有其他内容？当选中其中一个复选框时，如何取消选择Select All？

感谢。

Answer 1

在这里，您可以使用小提琴https://jsfiddle.net/Lt2k8wxL/

$('.selectAll').change(function() {
    if ($(this).is(':checked')){
        $('input[name="RAT_RoomList[]"]').prop('checked', false);
    }
});

$('input[name="RAT_RoomList[]"]').change(function(){
    if ($(this).is(':checked')){
        $('.selectAll').prop('checked', false);
    }
});

我想这就是你要找的东西。

Answer 2

在课程中使用not Selector可以实现这一目标。

$('.selectAll').click(function() {
  if ($(this).prop("checked", true)) {
    $(".col-sm-12").find('input[type=checkbox]').not('.selectAll').each(function() {
      this.checked = false;
    });
  }
});
$('input[type=checkbox]').not('.selectAll').click(function() {
  if ($(this).prop("checked", true)) {
    $('.selectAll').prop("checked", false)
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div class="col-sm-12">
  <div class="col-sm-4">
    <div class="checkbox checkbox-default">
      <input type="checkbox" name="RAT_RoomList[]" value="10">
      <label for="custome-checkbox1"># 11</label>
    </div>
  </div>
  <div class="col-sm-4">
    <div class="checkbox checkbox-default">
      <input type="checkbox" name="RAT_RoomList[]" value="11">
      <label for="custome-checkbox2"># 12</label>
    </div>
  </div>
  <div class="col-sm-4">
    <div class="checkbox checkbox-default">
      <input type="checkbox" name="RAT_RoomList[]" value="12">
      <label for="custome-checkbox3"># 13</label>
    </div>
  </div>
  <div class="col-sm-12">
    <div class="checkbox checkbox-default">
      <input type="checkbox" class="selectAll">
      <label for="custome-checkbox">Select all</label>
    </div>
  </div>
</div>

使用jQuery选中取消选中其他框

2 个答案: