單選按鈕以選中所有框

Question

<table class="table borderless">
    <thead>
      <tr>
        <th>Rank</th>
        <th>+/-</th>
        <th>Searches</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><input type="radio" name="optradio" class="custom"> ALL</td>
        <td><input type="radio" name="optradio" class="custom"> ALL</td>
        <td><input type="radio" name="optradio" class="custom"> ALL</td>
        <td><input id="ex2" type="text" class="span2" value="" data-slider-min="10" data-slider-max="1000" data-slider-step="1" data-slider-value="[0,1000]" data-slider-id="RC" id="R"/></td>
      </tr>
      <tr>
        <td><input type="checkbox" class="custom-selector"> Rank 1-10</td>
        <td><input type="checkbox" > Up</td>
        <td><input type="checkbox" > Over</td>
      </tr>
      <tr>
        <td><input type="checkbox" class="custom-selector"> Rank 11-20</td>
        <td><input type="checkbox" > Down</td>
        <td><input type="checkbox" > Under</td>
      </tr>
      <tr>
        <td><input type="checkbox" class="custom-selector"> Rank 21-100</td>
        <td><input type="checkbox" > No movement</td>

      </tr>
      <tr>
        <td><input type="checkbox" class="custom-selector"> Not in top 100</td>

      </tr>
    </tbody>
  </table>

腳本：

$(document).ready(function () {
       $(".custom").change(function () {
              $(".custom").parent().find(".custom-selector").prop("checked", true);
       })
   });

我需要的是一個單選按鈕，選中該復選框時會選中所有復選框。

現在，當我單擊單選按鈕時，什么也沒有發生。 但是，如果我添加此單選按鈕：

<input type="radio" id="op5" value="1" name="options2" class="custom">

然后他們都工作。 即使是最初的一個，也會選中所有框。

這是什么奇怪的行為？ 我想念一些東西

編輯：看來單選按鈕必須在桌子外面？ 我可以把它放在里面嗎？

Answer 1

嘗試：

$(".custom").closest("tbody").find(".custom-selector").prop("checked", true);

要不就：

$(".custom-selector").prop("checked", true);

Answer 2

嘗試這個：

$(".custom").change(function () {
    $(this).parents('tbody').find(".custom-selector:checked");
});

和一些參考： https : //api.jquery.com/checked-selector

最終使用.not(this)刪除操作選擇器

Answer 3

嘗試這個 ：

    $(document).ready(function () {
           $(".custom").change(function () {
             $(".custom-selector").prop("checked", true);
        })
    });