Klicken Sie auf Text, um Kontrollkästchen in einer Tabelle Spalte

Question

Ich habe Zeilen innerhalb Container mit Text-Header und Kontrollkästchen in jeder Spalte, ich möchte, wenn die Überschrift angeklickt die Kontrollkästchen unten in den gleichen Container, aber die anderen in anderen Container überprüft werden nicht betroffen (noch im Originalzustand geprüft oder geprüft). Hier ist das Bildschirm-Shooting für das Layout:

Hier ist der HTML-Code für die ersten Behälter:

<div class="container-fluid" style=""> 
<div class="row"> 
    <div class="col-sm-5" style="background-color:green;"><P class="member">Member</p></div> 
    <div class="col-sm-2" style="background-color:green;"><P class="add">ToogleAdd</p></div> 
    <div class="col-sm-2" style="background-color:green;"><P class="edit">ToogleEdit</p></div> 
    <div class="col-sm-2" style="background-color:green;"><P class="delete">ToogleDel</p></div> 
</div> 
<div class="row"> 
    <div class="col-sm-5"><input type="checkbox" name="auth100" value="auth100" id="auth100" onclick ="togAuth1()">New Member + Kit Purchase</input></div> 
    <div class="col-sm-2"><input type="checkbox" name="addAuth100" value="addAuth100" id="addAuth100">Add</input></div> 
    <div class="col-sm-2"><input type="checkbox" name="editAuth100" value="editAuth100" id="editAuth100">Edit</input></div> 
    <div class="col-sm-2"><input type="checkbox" name="delAuth100" value="delAuth100" id="delAuth100">Delete</input></div> 
</div> 
<div class="row"> 
    <div class="col-sm-5"><input type="checkbox" name="auth101" value="auth101" id="auth101">New Member Registration</input></div> 
    <div class="col-sm-2"><input type="checkbox" name="addAuth101" value="addAuth101" id="addAuth101">Add</input></div> 
    <div class="col-sm-2"><input type="checkbox" name="editAuth101" value="editAuth101" id="editAuth101">Edit</input></div> 
    <div class="col-sm-2"><input type="checkbox" name="delAuth101" value="delAuth101" id="delAuth101">Delete</input></div> 
</div> 
<div class="row"> 
    <div class="col-sm-5"><input type="checkbox" name="auth102" value="auth102" id="auth102">Member Data Maintenance</input></div> 
    <div class="col-sm-2"><input type="checkbox" name="addAuth102" value="addAuth102" id="addAuth102">Add</input></div> 
    <div class="col-sm-2"><input type="checkbox" name="editAuth102" value="editAuth102" id="editAuth102">Edit</input></div> 
    <div class="col-sm-2"><input type="checkbox" name="delAuth102" value="delAuth102" id="delAuth102">Delete</input></div> 
</div> 
<div class="row"> 
    <div class="col-sm-5"><input type="checkbox" name="auth103" value="auth103" id="auth103">Member Registration Listing</input></div> 
    <div class="col-sm-2"><input type="checkbox" name="addAuth103" value="addAuth103" id="addAuth103">Add</input></div> 
    <div class="col-sm-2"><input type="checkbox" name="editAuth103" value="editAuth103" id="editAuth103">Edit</input></div> 
    <div class="col-sm-2"><input type="checkbox" name="delAuth103" value="delAuth103" id="delAuth103">Delete</input></div> 
</div> 
<div class="row"> 
    <div class="col-sm-5"><input type="checkbox" name="auth104" value="auth104" id="auth104">Geneology Listing</input></div> 
    <div class="col-sm-2"><input type="checkbox" name="addAuth104" value="addAuth104" id="addAuth104">Add</input></div> 
    <div class="col-sm-2"><input type="checkbox" name="editAuth104" value="editAuth104" id="editAuth104">Edit</input></div> 
    <div class="col-sm-2"><input type="checkbox" name="delAuth104" value="delAuth104" id="delAuth104">Delete</input></div> 
</div> 
<div class="row"> 
    <div class="col-sm-5"><input type="checkbox" name="auth105" value="auth105" id="auth105">Member Rank Report</input></div> 
    <div class="col-sm-2"><input type="checkbox" name="addAuth105" value="addAuth105" id="addAuth105">Add</input></div> 
    <div class="col-sm-2"><input type="checkbox" name="editAuth105" value="editAuth105" id="editAuth105">Edit</input></div> 
    <div class="col-sm-2"><input type="checkbox" name="delAuth105" value="delAuth105" id="delAuth105">Delete</input></div> 
</div> 

HTML-Code für die zweiten Behälter:

<div class="container-fluid"> <div class="row"> 
<div class="col-sm-5" style="background-color:green;"><P class="member">Member</p></div> 
<div class="col-sm-2" style="background-color:green;"><P class="add">ToogleAdd</p></div> 
<div class="col-sm-2" style="background-color:green;"><P class="edit">ToogleEdit</p></div> 
<div class="col-sm-2" style="background-color:green;"><P class="delete">ToogleDel</p></div></div><div class="row"> 
<div class="col-sm-5"><input type="checkbox" name="auth100" value="auth100" id="auth200">New Member + Kit Purchase</input></div> 
<div class="col-sm-2"><input type="checkbox" name="addAuth100" value="addAuth100" id="addAuth200">Add</input></div> 
<div class="col-sm-2"><input type="checkbox" name="editAuth100" value="editAuth100" id="editAuth200">Edit</input></div> 
<div class="col-sm-2"><input type="checkbox" name="delAuth100" value="delAuth100" id="delAuth200">Delete</input></div></div></div> 

hier ist die unvollendete jquery Code:

$('.container-fluid').each(function(){$('.row:first').each(function(){$('.member').click(function(){ 


}); 
$('.add').click(function(){ 

}); 
$('.edit').click(function(){ 

}); 
$('.delete').click(function(){ 

}); });}); 

Answer 1

Fügen Sie Klassen zu allen Kontrollkästchen hinzu (.edit_check, .add_check etc.)
Dann ändern Sie sie alle mit Javascript oder JQ.

$('.add').click(function(){ 
    if ($(".add_check").is(":checked")){ //if at least one is checked 
     document.getElementByClassName(".add_check").checked = false; //JS version 
     $(".add_check").prop("checked", false); //JQ version 
    } else { 
     document.getElementByClassName(".add_check").checked = true; //JS version 
     $(".add_check").prop("checked", true); //JQ version 
    } 

}); 

Answer 2

$(".member").click(function(){ 
     $("input[id^='auth']").each(function(){ 
       $(this).prop("checked",true); 
     }); 
}); 

auf Header alle IDs klicken Auth Start geprüft werden.