Aktivieren/Deaktivieren Sie alle Kontrollkästchen für Kontrollkästchen im nächsten Blockelement

Question

Ich versuche, alle im folgenden dd.options-basierten "dept_checkbox" -Abfragen zu deaktivieren bzw. auszuwählen. Es gibt ungefähr 1 bis 100 Checkboxen in jedem dd-Block (ich setze 2 Kurse in den ersten "dept_checkbox" Abschnitt und 1 in den nächsten) für dieses Snippet.

<div class="accordion"> 
    <dt><input class="dept_checkbox" type="checkbox" onclick="selectAll($(this).parent().next(".options"))"><a href="">EYES|VISI</a></dt> 
    <dd class="options"> 
    <li> 
    <label> 
     <input type="checkbox" name="course_EYES|VISI" value="course_XXX">XXX 
    </label> 
    </li> 
    <li> 
    <label> 
     <input type="checkbox" name="course_EYES|VISI" value="course_YYY">YYY 
    </label> 
    </li> 
    </dd> 

    <dt><input class="dept_checkbox" type="checkbox" onclick="selectAll($(this).parent().next(".options"))"><a href="">EARS|HEAR</a></dt> 
    <dd class="options"> 
    <li> 
    <label> 
     <input type="checkbox" name="course_EARS|HEAR" value="course_EEE">EEE 
    </label> 
    </li> 
    </dd>  
</div> 

Ich habe folgende bisher weit, aber ich bin mir nicht sicher, wie es zu gehen, ich versuche, dies mit Jquery zu erreichen.

Ich versuche zu vermeiden, einen der "Name" oder "Wert" -Werte aufzurufen, da sie alle ändern. Nur die Dinge bleiben statisch (sie werden mit allen Ergebnissen angezeigt) sind 'dept_checkbox' für jedes der Kontrollkästchen Alle auswählen und 'Optionen', die die Kontrollkästchen für die vorherige Auswahl/Auswahl aller Schaltflächen enthalten würden.

Answer 1

$('.dept_checkbox').click(function() { 
 
    if ($(this).is(':checked')) { 
 
    $(this).parent().next().find('input').prop('checked', true); 
 
    } else { 
 
    $(this).parent().next().find('input').prop('checked', false); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="accordion"> 
 
    <dt><input class="dept_checkbox" type="checkbox"><a href="">EYES|VISI</a></dt> 
 
    <dd class="options"> 
 
    <li> 
 
     <label> 
 
     <input type="checkbox" name="course_EYES|VISI" value="course_XXX">XXX 
 
    </label> 
 
    </li> 
 
    <li> 
 
     <label> 
 
     <input type="checkbox" name="course_EYES|VISI" value="course_YYY">YYY 
 
    </label> 
 
    </li> 
 
    </dd> 
 

 
    <dt><input class="dept_checkbox" type="checkbox"><a href="">EARS|HEAR</a></dt> 
 
    <dd class="options"> 
 
    <li> 
 
     <label> 
 
     <input type="checkbox" name="course_EARS|HEAR" value="course_EEE">EEE 
 
    </label> 
 
    </li> 
 
    </dd> 
 
</div>

Answer 2

Versuchen Sie etwas wie $('.options').find(':checkbox ').prop({checked: true}) Das findet jedes Kontrollkästchen in Optionen und setzt die Eigenschaft ': checked' auf 'true'.

Answer 3

Here we go:

checkCheckboxes = function(check){ 
 
$(".accordion input[type='checkbox']").prop('checked',check); 
 
} 
 

 
//Uncheck all the checkboxes 
 
checkCheckboxes(false); 
 
//Check all the checkboxes 
 
checkCheckboxes(true);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="accordion"> 
 
    <dt><input class="dept_checkbox" type="checkbox" onclick="selectAll($(this).parent().next(".options"))"><a href="">EYES|VISI</a></dt> 
 
    <dd class="options"> 
 
    <li> 
 
    <label> 
 
     <input type="checkbox" name="course_EYES|VISI" value="course_XXX">XXX 
 
    </label> 
 
    </li> 
 
    <li> 
 
    <label> 
 
     <input type="checkbox" name="course_EYES|VISI" value="course_YYY">YYY 
 
    </label> 
 
    </li> 
 
    </dd> 
 

 
    <dt><input class="dept_checkbox" type="checkbox" onclick="selectAll($(this).parent().next(".options"))"><a href="">EARS|HEAR</a></dt> 
 
    <dd class="options"> 
 
    <li> 
 
    <label> 
 
     <input type="checkbox" name="course_EARS|HEAR" value="course_EEE">EEE 
 
    </label> 
 
    </li> 
 
    </dd>  
 
</div>