Checkbox-Regeln Skript gilt für eine einzelne Zeile von Kontrollkästchen, aber ich kann nicht für mehrere Zeilen gelten

Question

Ich habe eine Reihe von Kontrollkästchen, die bestimmte Regeln angewendet haben: Wenn "Voice" oder "Mail" wird geprüft - dann muss 'Auswählen' ebenfalls automatisch überprüft werden.
Wenn jedoch "Select" vom Benutzer deaktiviert ist, müssen sowohl "Voice" als auch "Mail" automatisch deaktiviert werden.
Ich habe die Geige für diese hier:
https://jsfiddle.net/monkeyroboninja/omym4efh/18/

Dies funktioniert gut, aber jetzt möchte ich es auf mehrere Tabellenzeilen, wobei jede Zeile der Lage, enthalten ihre eigenen Werte in den Kontrollkästchen anzuwenden. Also dachte ich, ich müsste eine Schleife benutzen, um durch jede Zeile zu gehen, die <td> ID-Attribute in Klassenattribute zu ändern (da es jetzt mehrere gibt), und auch das (this) -Schlüsselwort, um meine jQuery nur auf die Tabellenzeile derzeit durch die Schleife. Also mit diesem Gedanken habe ich dies: https://jsfiddle.net/monkeyroboninja/oc18um8t/11/

und hier ist, dass Code in Fall ist es einfacher für Sie:

$(".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); 
       } 
      }); 
}); 

aaand es nicht funktioniert! Ich denke es ist die Verwendung des (dieses) Keywords, das ich falsch mache, aber was ich im Web gefunden habe, hilft nicht (oder ich kann es nicht verstehen). Dieses Schlüsselwort scheint mir überall zu sein! Kann jemand vorschlagen, wo ich falsch gelaufen bin?

Answer 1

versuchen diese

$(".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

Sie können es auf diese Weise versuchen:

$(".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>