Question

我有这个HTML

<label class="">
    <label>
        <input type="checkbox" class="selectAll" name="RAT_RoomsAffected">
        Activate
    </label>
</label> 

<br />

<label class="">
    <label>
        <input type="checkbox" name="RAT_RoomsList[]" value="75" checked="">
        <div style="width: 200px">Room #1</div>
    </label>
</label>

<label class="">
    <label>
        <input type="checkbox" name="RAT_RoomsList[]" value="76" checked="">
        <div style="width: 200px">Room #2</div>
    </label>
</label>

这是我的尝试：

if($('.selectAll').length) {
    $('.selectAll').click(function() {
        if ($(this).prop("checked", true)) {
            $('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);
        }
    });
}

实际上，我的问题是我无法单击Room #1和Room #2复选框。

我认为我离解决方案很近，但是我无法使其真正起作用。

你知道为什么吗？

谢谢。

Answer 1

您实际上是在if中设置已选中的属性……不是获取它。

设置时；它将返回总是真实的jQuery对象。当得到;它返回布尔值

第二种情况下的逻辑是向后的。

如果另一个未选中而不是未选中，则应取消选中selectAll

$('.selectAll').click(function() {
  if ($(this).prop("checked")) {
    $('input[type=checkbox]').not(this).prop("checked", true);
  }
});
$('input[type=checkbox]').not('.selectAll').click(function() {
  if (!$(this).prop("checked")) {
    $('.selectAll').prop("checked", false);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="">
    <label>
        <input type="checkbox" class="selectAll" name="RAT_RoomsAffected">
        Activate
    </label>
</label>

<br />

<label class="">
    <label>
        <input type="checkbox" name="RAT_RoomsList[]" value="75" checked="">
        <div style="width: 200px">Room #1</div>
    </label>
</label>

<label class="">
    <label>
        <input type="checkbox" name="RAT_RoomsList[]" value="76" checked="">
        <div style="width: 200px">Room #2</div>
    </label>
</label>

无法使用jQuery选择复选框

1 个答案: