“全部检查”框目前检查页面上的所有内容

Question

我希望每个“全部检查”框仅适用于它所针对的特定类别。使用下面的例子，当我点击丰田的全部复选框时，它也会检查福特的方框。我想丰田检查所有的盒子只适用于丰田汽车。当我将脚本编写为单独的项目时，此代码有效，但在创建单独的JS文件时它停止工作。我有几个类别，我将使用这个代码，所以如果有一种方法可以写一次，而不是每个类别的一个也将被赞赏。

<button class="accordion">Toyota</a></button>
<div class="panel">
<form action="CarPHPTest.php" method="post">
<input type="submit" name="submit" value="Submit"> 
<br/>
<p><input type="checkbox" name="check_uncheck" id="check_uncheck" /> Check         All/Uncheck All

<br/>
<div class="checkboxes">
 <input type="checkbox" name="check_list[]" value=Camry id="check" /> Camry     <br/>
<input type="checkbox" name="check_list[]" value=Corolla id="check" /> Corolla   <br/>
</div> </p> </form>
</div>

<button class="accordion">Ford</a></button>
<div class="panel">
<form action="CarPHPTest.php" method="post">
<input type="submit" name="submit" value="Submit"> 
<br/>
<p><input type="checkbox" name="check_uncheck2" id="check_uncheck2" /> Check All/Uncheck All

<br/>
<div class="checkboxes">
<input type="checkbox" name="check_list[]" value=Fusion id="check" /> Fusion  <br/>
  <input type="checkbox" name="check_list[]" value=Focus id="check" /> Focus   <br/>
</div> </p> </form>
</div>

JS File
// JavaScript Document
// The following script is for the check all/uncheckall feature 

jQuery(document).ready(function() {
    "use strict";
$("#check_uncheck").change(function() {
    if ($("#check_uncheck:checked").length) {
        $(".checkboxes input:checkbox").prop("checked", true);
    } else {
        $(".checkboxes input:checkbox").prop("checked", false);
    }
});
});

jQuery(document).ready(function() {
"use strict";
$("#check_uncheck2").change(function() {
    if ($("#check_uncheck2:checked").length) {
        $(".checkboxes input:checkbox").prop("checked", true);
    } else {
        $(".checkboxes input:checkbox").prop("checked", false);
    }
});
});

Answer 1

1. 使用此上下文检查当前更改的复选框
2. 在选择器中使用最近（“。panel”）来仅选择相关的复选框
3. 修正ID ID应该是唯一的

$("#check_uncheck").change(function() {
  if ($(this).is(":checked")) {
    $(this).closest(".panel").find(".checkboxes input:checkbox").prop("checked", true);
  } else {
    $(this).closest(".panel").find(".checkboxes input:checkbox").prop("checked", false);
  }
});

"use strict";
$("#check_uncheck2").change(function() {
  if ($(this).is(":checked")) {
    $(this).closest(".panel").find(".checkboxes input:checkbox").prop("checked", true);
  } else {
    $(this).closest(".panel").find(".checkboxes input:checkbox").prop("checked", false);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="accordion">Toyota</button>
<div class="panel">
  <form action="CarPHPTest.php" method="post">
    <input type="submit" name="submit" value="Submit">
    <br/>
    <p><input type="checkbox" name="check_uncheck" id="check_uncheck" /> Check All/Uncheck All

      <br/>
      <div class="checkboxes">
        <input type="checkbox" name="check_list[]" value=Camry id="check" /> Camry <br/>
        <input type="checkbox" name="check_list[]" value=Corolla id="check" /> Corolla <br/>
      </div>
  </form>
</div>

<button class="accordion">Ford</button>
<div class="panel">
  <form action="CarPHPTest.php" method="post">
    <input type="submit" name="submit" value="Submit">
    <br/>
    <p><input type="checkbox" name="check_uncheck2" id="check_uncheck2" /> Check All/Uncheck All

      <br/>
      <div class="checkboxes">
        <input type="checkbox" name="check_list[]" value=Fusion id="check" /> Fusion <br/>
        <input type="checkbox" name="check_list[]" value=Focus id="check" /> Focus <br/>
      </div>
  
  </form>
</div>

更短的版本：

$("#check_uncheck").change(function() {
  $(this).closest(".panel").find(".checkboxes input:checkbox").prop("checked", $(this).is(":checked"));
});

"use strict";
$("#check_uncheck2").change(function() {
  $(this).closest(".panel").find(".checkboxes input:checkbox").prop("checked", $(this).is(":checked"));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="accordion">Toyota</button>
<div class="panel">
  <form action="CarPHPTest.php" method="post">
    <input type="submit" name="submit" value="Submit">
    <br/>
    <p><input type="checkbox" name="check_uncheck" id="check_uncheck" /> Check All/Uncheck All

      <br/>
      <div class="checkboxes">
        <input type="checkbox" name="check_list[]" value=Camry id="check" /> Camry <br/>
        <input type="checkbox" name="check_list[]" value=Corolla id="check" /> Corolla <br/>
      </div>
  </form>
</div>

<button class="accordion">Ford</button>
<div class="panel">
  <form action="CarPHPTest.php" method="post">
    <input type="submit" name="submit" value="Submit">
    <br/>
    <p><input type="checkbox" name="check_uncheck2" id="check_uncheck2" /> Check All/Uncheck All

      <br/>
      <div class="checkboxes">
        <input type="checkbox" name="check_list[]" value=Fusion id="check" /> Fusion <br/>
        <input type="checkbox" name="check_list[]" value=Focus id="check" /> Focus <br/>
      </div>

  </form>
</div>