Wie mache ich meinen Kippschalter?

Question

Ich habe den folgenden Code: jQuery + Bootstrap

https://jsfiddle.net/a27rffb2/4/

jQuery Element:

$(document).ready(function() { 

    $('input:checkbox').change(function() { 
    if ($("#toggle1").is(":checked")) { 
     $("#collapseOneC1").collapse('show'); 
     $("#collapseTwoC1").collapse('show'); 
     $("#collapseThreeC1").collapse('show'); 
    } else { 
     $("#collapseOneC1").collapse('hide'); 
     $("#collapseTwoC1").collapse('hide'); 
     $("#collapseThreeC1").collapse('hide'); 
    } 
    }); 
    //Toggle on Element Collapse 
    $("#collapseOneC1, #collapseTwoC1, #collapseThreeC1").on('shown.bs.collapse', function() { 
    $('#toggle1').prop("checked", true); 
    }); 
    $("#collapseOneC1, #collapseTwoC1, #collapseThreeC1").on('hidden.bs.collapse', function() { 
    $('#toggle1').prop("checked", false); 
    }); 
}); 

Problemstellung: Der Kippschalter nur Platten angezeigt werden, wenn alle Optionen geprüft werden sollte (wenn Sie klicken auf das Optionsfeld, um es einzeln zu öffnen. Wie kann dies erreicht werden, indem der obige Code bearbeitet wird?

Danke für die Überprüfung!

Answer 1

Sie benötigen einen Zustand hinzuzufügen, zu überprüfen, ob alle Optionen angezeigt, was bedeutet, Sie müssen überprüfen, ob sie die ganze Klasse .show mit JQuery-Funktion .hasClass()

if ($('#collapseOneC1').hasClass('show') && $('#collapseTwoC1').hasClass('show') && $('#collapseThreeC1').hasClass('show')) { 
    $('#toggle1').prop("checked", true); 
} 

See updated fiddle

Answer 2

Bitte überprüfen Sie die aktualisierten Code: https://jsfiddle.net/KlaussU/a27rffb2/6/

if(areAllOptionsExpanded()) { 
      $('#toggle1').prop("checked", true); 
    } 
function areAllOptionsExpanded() { 
    return $(".card-header.collapsed").length == 0; 
} 

Ich denke, das ist eine bessere Lösung, da Sie $ ('# collapseOneCX'). HasClass ('show') nicht manuell für jede Option hinzufügen müssen, die Sie in Zukunft hinzufügen (oder entfernen) möchten. Selbst wenn Sie denken, dass Sie das nicht tun müssen, können Sie immer noch nicht 100% ig sicher sein. Daher ist es besser, eine allgemeinere Lösung zu schreiben, die Sie in der Zukunft nicht verändern würde.