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

Question

我做了一行复选框，这些复选框应用了某些规则：如果选中"语音"或"邮件"，则"选择"也必须自动选中。
但是，如果用户取消选中"选择" - 则"语音"和"邮件"也必须自动取消选中。
我在这里有这方面的小提琴：
https://jsfiddle.net/monkeyroboninja/omym4efh/18/

这工作正常，但现在我希望它应用于多个表行，每行能够在这些复选框中包含自己的一组值。所以我认为我需要使用循环来遍历每一行，将 <td> id 属性更改为类属性（因为现在有多个属性），并且还使用 （this） 关键字使我的 jQuery 仅适用于当前通过循环的表行。所以带着这个想法，我做了这个：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>