单击文本以检查一个表列中的复选框

Question

我的容器内有行，文本标题和每个列中都有复选框，我想在单击标题时进行检查，同一个容器内的下面的复选框会被检查但另一个容器中的另一个不受影响（仍处于原始状态检查状态）或检查）。这是布局的屏幕截图：

这是第一个容器的html代码：

<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代码：

<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>

这是未完成的jquery代码：

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


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

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

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

});  });});

Answer 1

为所有复选框添加课程（.edit_check, .add_check等）
然后使用Javascript或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);
        });
});

单击标题上的

单击以auth开头的所有ID。