トグルスイッチを動作させるにはどうすればよいですか？

Question

私は次のコードを持っている：jQueryの+ブートストラップ

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

jQueryの要素：

$(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); 
    }); 
}); 

問題文：トグルスイッチが（すべてのオプションパネルが表示されている場合にのみチェックする必要がありますが個別に開くにはオプションパネルをクリックします）。上記のコードを編集することでどのように達成できますか？

ありがとうございました！

Answer 1

は、あなたは彼らのすべてがjQueryの機能.hasClass()

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

See updated fiddle

Answer 2

を使用して、クラス.SHOWを持っているかどうかを確認する必要があることを意味している、すべてのオプションが表示されているかどうかを確認するための条件を追加する必要があります更新されたコードを確認してください： https://jsfiddle.net/KlaussU/a27rffb2/6/

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

将来的に追加したい（または削除する）オプションごとに$（ '＃collapseOneCX'）。hasClass（ 'show'）を手動で追加する必要がないので、これはより良い解決策だと思います。あなたがそれをする必要はないと思っても、まだ100％確実ではないので、将来的に変更を加える必要のないより一般的な解決策を書く方が良いでしょう。