复选框规则脚本适用于单行复选框，但我无法将其应用于多行

Question

我制作了一排应用了特定规则的复选框：如果选中 'Voice' 或 'Mail' - 那么 'Select' 也必须自动选中。
但是，如果 'Select' 未被用户选中 - 那么 'Voice' 和 'Mail' 也必须自动取消选中。
我这里有 fiddle：
https://jsfiddle.net/monkeyroboninja/omym4efh/18/

这很好用，但现在我希望它应用于多个 table 行，每一行都可以在这些复选框中包含自己的一组值。所以我想我需要使用循环遍历每一行，将 <td> id 属性更改为 class 属性（因为现在有多个属性），并且还使用 (this) 关键字使我的 jQuery 仅适用于当前通过循环的 table 行。所以有了这个想法，我做了这个： https://jsfiddle.net/monkeyroboninja/oc18um8t/11/

这里是代码，以防你更容易：

$(".tableRow").each(function() {

            var $select = $((this) ".select"); 
            var $voice = $((this) ".voice"); 
            var $mail = $((this) ".mail"); 

            $($(this) $voice).click(function(){                         
                if($(this).val('TRUE')){                            
                    $((this) $select).prop('checked', true);        
                }
            });

            $($(this) $mail).click(function(){                  
                if($(this).val('TRUE')){
                    $($select).prop('checked', true);
                }
            });

            $($(this) $select).click(function(){
                if($(this).val('FALSE')){
                    $($voice).prop('checked', false);
                }
            });

            $($(this) $select).click(function(){
                if($(this).val('FALSE')){
                    $($mail).prop('checked', false);
                }
            });
});

啊啊，没用！我认为它对 (this) 关键字的使用我错了，但我在网上找到的内容没有帮助（或者我无法理解）。我似乎到处都有这个关键词！谁能指出我哪里出错了？

Answer 1

试试这个

$(".tableRow").each(function() {
  var row = this;
  $(row).find(".voice").click(function(){
    if($(this).val('TRUE')){
      $(row).find('.select').prop('checked', true);
    }
  });

  $(row).find(".mail").click(function(){
    if($(this).val('TRUE')){
      $(row).find('.select').prop('checked', true);
    }
  });

  $(row).find(".select").click(function(){
    if($(this).val('FALSE')){
      $(row).find('.voice').prop('checked', false);
      $(row).find('.mail').prop('checked', false);
    }
  });                              
                
});

Answer 2

你可以这样试试：

$(".tableRow :checkbox").change(function() {

  var $this = $(this);

  // If '.select' is clicked
  if ($this.is('.select')) {
    $this
      .closest('td')
      .nextAll()
      .find('.mail, .voice')
      .prop('checked', $this.is(':checked'));
  }

  // if '.mail' or '.voice' is clicked
  if ($this.is('.mail, .voice')) {
    var
      $select = $this.closest('tr').find('.select'),
      $checked = $this.closest('tr').find('.mail:checked, .voice:checked');

    if ($checked.length == 2) // If both are checked
      $select.prop('checked', true);
    else // If one of them is not checked
      $select.prop('checked', false);
  }
});

td {
  border: red 2px dotted;
  padding: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="resultsTable">
  <thead>
    <tr>
      <th>Area</th>
      <th>Number Type</th>
      <th>Select</th>
      <th>Voice</th>
      <th>Mail</th>
    </tr>
  </thead>

  <tbody>
    <tr class="tableRow">
      <td>Placeholder Data</td>
      <td>Placeholder Data</td>
      <td>
        <input type="checkbox" class="select" />
      </td>
      <td>
        <input type="checkbox" class="voice" />
      </td>
      <td>
        <input type="checkbox" class="mail" />
      </td>
    </tr>
  </tbody>

  <tbody>
    <tr class="tableRow">
      <td>Placeholder Data</td>
      <td>Placeholder Data</td>
      <td>
        <input type="checkbox" class="select" />
      </td>
      <td>
        <input type="checkbox" class="voice" />
      </td>
      <td>
        <input type="checkbox" class="mail" />
      </td>
    </tr>
  </tbody>

  <tbody>
    <tr class="tableRow">
      <td>Placeholder Data</td>
      <td>Placeholder Data</td>
      <td>
        <input type="checkbox" class="select" />
      </td>
      <td>
        <input type="checkbox" class="voice" />
      </td>
      <td>
        <input type="checkbox" class="mail" />
      </td>
    </tr>
  </tbody>
</table>

复选框规则脚本适用于单行复选框，但我无法将其应用于多行

Checkbox Rules Script applies to a single row of checkboxes, but I can't get it to apply to multiple rows

html

checkbox

jquery

loops

this