"Check All"ボックスは現在ページのすべてをチェックしています

Question

"check all"ボックスはそれぞれのカテゴリにのみ適用されます。下の例を使用して、Toyotaのチェックボックスをすべてオンにすると、Fordのチェックボックスもチェックされます。私はToyota Check all boxをトヨタ車にのみ適用したいと思います。このコードは別の項目としてスクリプトを書き込むときに機能しますが、別の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. のみ関連するチェックボックスを選択するセレクタで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>

短いバージョン：FYI

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