"Check All"框当前检查页面上的所有内容

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. 在选择器中使用 closest(".panel"( 仅选中相关的复选框
3. 修复 IDID 应该是唯一的

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