Jquery Флажок не меняется

Question

проблема в том, что если вы установите, а затем снимите флажок vacancy_select, а затем установите флажок выбора, это не изменит статус проверки vacancy_select

У меня есть несколько флажков на экране, первый флажок $("input[type=checkbox]#selection") будет включать или выключать все остальные флажки, в зависимости от состояния первого флажка.

$('input[type=checkbox]#selection').on('change', function () {
    let rows = $("tr.content_list > td > input[type=checkbox].vacancy_select");
    for(let i=0; i < rows.length; i++){
        $(rows[i]).attr('checked', this.checked);
    }
});

если я выбираю или изменяю статус любого из других флажков, то эти флажки

$("tr.content_list > td > input[type=checkbox].vacancy_select") не обновляется при установке этого флажка $("input[type=checkbox]#selection") как отмеченного.

$('input[type=checkbox]#selection').on('change', function() {
  let rows = $("input[type=checkbox].vacancy_select");
  for (let i = 0; i < rows.length; i++) {
    $(rows[i]).attr('checked', this.checked);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table  id="list_table" class="table table-striped table-bordered" style="width:100%">
    <thead>
        <tr>
            <th>
                <input type="checkbox" id="selection" name="selection">Selection
            </th>
        </tr>
        <tr>
            <td class="na">
                <a class="btn btn-primary" href="{{ asset('/dashboard/vacancy/add')}}" style="color: #FFF">New Vacancy</a>
            </td>
        </tr>
    </thead>
    <tr class="content_list">
        <td>
            <input type="checkbox" class="vacancy_select" data-vacancy-id="{{ $vacancy->id }}">
       </td>
    </tr>a
    <tr class="content_list">
        <td>
            <input type="checkbox" class="vacancy_select" data-vacancy-id="{{ $vacancy->id }}">
       </td>
    </tr>a
    <tr class="content_list">
        <td>
            <input type="checkbox" class="vacancy_select" data-vacancy-id="{{ $vacancy->id }}">
       </td>
    </tr>
</table>

Answer 1

Вы должны использовать .prop() для этого, также вам не нужно l oop для установки атрибута / prop: вот скрипка и рабочий фрагмент:

$('input[type=checkbox]#selection').on('change', function() {
  let rows = $("input[type=checkbox].vacancy_select");
  rows.prop('checked', this.checked);
});

$('input[type=checkbox].vacancy_select').on('change', function() {
  let selectedRows = $("input[type=checkbox].vacancy_select:checked").length;
  let allElements = $('input[type=checkbox].vacancy_select').length;
  let checked = false;
  if(selectedRows === allElements) {
    checked = true;
  }
  $('input[type=checkbox]#selection').prop('checked', checked)
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="selection" name="selection">Selection

<input type="checkbox" class="vacancy_select" data-vacancy-id="1">
<input type="checkbox" class="vacancy_select" data-vacancy-id="2">
<input type="checkbox" class="vacancy_select" data-vacancy-id="3">
<input type="checkbox" class="vacancy_select" data-vacancy-id="4">