토글 스위치를 작동 시키려면 어떻게해야합니까?

Question

I가 다음 코드를 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 % 확신 할 수는 없으므로 이후에 변경하지 않아도되는보다 일반적인 솔루션을 작성하는 것이 좋습니다.