Не могу установить флажок с помощью jQuery

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>