チェックボックスルールスクリプトは1行のチェックボックスに適用されますが、複数の行に適用することはできません

Question

特定のルールが適用されたチェックボックス行を作成しました： 'Voice'または 'Mail'チェックされていなければ、 '選択'も自動的にチェックされなければなりません。
「選択」がユーザーによってチェックされていない場合、「音声」と「メール」の両方が自動的に選択解除されなければなりません。
私はここで、このためのフィドルを持っている：
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); 
       } 
      }); 
}); 

AAANDだからこれで、私はこれを作ったと思いました！私はその（この）キーワードの使用が間違っていると思うが、私がウェブ上で見つけたものは助けにならない（または理解できない）。私はどこにでもそのキーワードを持っているようです！ 誰かが私が間違っていた場所を提案することはできますか？

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>