Установите или снимите флажки в зависимости от результата проверки переключателей

Question

На виде спереди у меня:

<div class="single-category-container">
    <table>
        <thead>
            <tr>
                <th scope="col">Base</th>
                <th scope="col">Select</th>
                <th scope="col"></th>
            </tr>
        </thead>
        <tbody>
            @foreach($data as $cvk => $cvv)
                <tr class="am-row">
                    <td>
                        <div class="radio radio-info pl-2">
                            <input type="radio" name="base_cat_{{$ck}}" id="am_{{ $cvv['amenity_id'] }}" value="{{ $cvv['amenity_id'] }}">
                            <label for="am_{{ $cvv['amenity_id'] }}">
                            </label>
                        </div>
                    </td>
                    <td>
                        <div class="checkbox checkbox-info pl-2">
                            <input name="selected_am" id="checkbox_am_{{ $cvv['amenity_id'] }}" type="checkbox" checked="checked">
                            <label for="checkbox_am_{{ $cvv['amenity_id'] }}">
                            </label>
                        </div>
                    </td>
                    <td>{{ $cvv['amenity_name'] }}</td>
                </tr>
               @endforeach
        </tbody>
    </table>
</div>

Здесь вы можете увидеть, что в первом столбце есть radio, а во втором столбце - checkbox. Итак, мои требования заключаются в том, что всякий раз, когда проверяется кнопка radio, я хочу, чтобы все checkbox проверялись из этого single-category-container, кроме checkbox той же строки, где проверяется кнопка radio.

Я пробовал следующий код, но безуспешно:

$('.single-category-container input[type=radio]').change(function() {
    $(this).parents('.single-category-container input[type=checkbox]').attr('checked',true);
    $(this).parents('tr input[type=checkbox]').attr('checked',false);
});

Note: there are multiple `.single-category-container` that is even this container is in a loop, here I am representing just a element from the loop because it should give the idea.

Answer 1

Попробуйте следующее. Для этого нужно добавить find.

$('.aprFilterCol input[type=radio]').change(function() {
    $(this).parents('.single-category-container').find('input[type="checkbox"]').prop('checked',true);
    $(this).parents('tr').find('input[type="checkbox"]').prop('checked',false);
});

Answer 2

Селекторы, которые используются для поиска родителя, неверны. Вместо того, чтобы пытаться найти элементы в одном go, выполняя $(this).parents('.single-category-container input[type=checkbox]')', сначала найдите ближайшего родителя, а затем найдите соответствующие дочерние элементы внутри него. Вот рабочий пример

$(document).on('change', '.single-category-container input[type=radio]', function() {
  $(this).closest('.single-category-container').find('input[type=checkbox]').prop('checked', true);
  $(this).closest('tr').find('input[type=checkbox]').prop('checked', false);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="single-category-container">
  <table>
    <thead>
      <tr>
        <th scope="col">Base</th>
        <th scope="col">Select</th>
        <th scope="col"></th>
      </tr>
    </thead>
    <tbody>
      <tr class="am-row">
        <td>
          <div class="radio radio-info pl-2">
            <input type="radio" name="base_cat" id="radio1" value="">
            <label for="radio1">
              </label>
          </div>
        </td>
        <td>
          <div class="checkbox checkbox-info pl-2">
            <input name="selected_am" id="check1" type="checkbox">
            <label for="check1">
              </label>
          </div>
        </td>
        <td>Name</td>
      </tr>
      <tr class="am-row">
        <td>
          <div class="radio radio-info pl-2">
            <input type="radio" name="base_cat" id="radio2" value="">
            <label for="radio2">
              </label>
          </div>
        </td>
        <td>
          <div class="checkbox checkbox-info pl-2">
            <input name="selected_am" id="check2" type="checkbox">
            <label for="check2">
              </label>
          </div>
        </td>
        <td>Name</td>
      </tr>
      <tr class="am-row">
        <td>
          <div class="radio radio-info pl-2">
            <input type="radio" name="base_cat" id="radio3" value="">
            <label for="radio3">
              </label>
          </div>
        </td>
        <td>
          <div class="checkbox checkbox-info pl-2">
            <input name="selected_am" id="check3" type="checkbox">
            <label for="check3">
              </label>
          </div>
        </td>
        <td>Name</td>
      </tr>
      <tr class="am-row">
        <td>
          <div class="radio radio-info pl-2">
            <input type="radio" name="base_cat" id="radio4" value="">
            <label for="radio4">
              </label>
          </div>
        </td>
        <td>
          <div class="checkbox checkbox-info pl-2">
            <input name="selected_am" id="check4" type="checkbox">
            <label for="check4">
              </label>
          </div>
        </td>
        <td>Name</td>
      </tr>

    </tbody>
  </table>
</div>