2016-11-02 4 views
1

부트 스트랩 스위치에 따라 콘텐츠를 숨기고 표시해야하는 양식을 작성 중입니다. 의 onclick = "하는 DocumentFilter 이벤트가 정상 체크 박스에 작동합니다. 그러나, 그 순간 나는 부트 스트랩 스위치를 초기화 코드가 의도 한대로 어떤 생각이 무엇을 내가 부족 작동하지 않습니다 감사합니다부트 스트랩 스위치에 onclick 이벤트 바인딩하기

<!--DEPENDENCIES--> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.2/js/bootstrap-switch.min.js"></script> 
 

 
<!--HTML--> 
 
<body> 
 
    
 
    <div class="container"> 
 
     <label> 
 
      <input type="checkbox" name="my-checkbox" onclick="documentFilter(this, '#hideableDiv')"> Some caption 
 
     </label> 
 

 
     <div id="hideableDiv" class="hiddenByDefault">Some hidable content 
 
     </div> 
 
    </div> 
 

 
</body> 
 

 
<!--PAGE-SPECIFIC SCRIPT--> 
 

 
<script type="text/javascript"> 
 

 
//Initialise BootstrapSwitch 
 
$("[name='my-checkbox']").bootstrapSwitch(); 
 

 
//Unchecked on load 
 
$(".hiddenByDefault").hide(); 
 

 
//document filter function 
 
function documentFilter(trigger, target) { 
 
    var $target = $(target); 
 

 
    $(trigger).change(function() { 
 
     $target.toggle(this.checked); 
 
    }); 
 
} 
 

 
</script>
?!

답변

0

Bootstrap Switch library의 설명서를 확인하면 기능을 제공 할 수있는 onSwitchChange 속성이 있음을 알 수 있습니다.이 기능은 스위치를 전환 할 때 실행됩니다.이 기능을 사용하면 구식이고 못생긴 on* 이벤트 속성. 사용해보기 :

$("[name='my-checkbox']").bootstrapSwitch({ 
 
    onSwitchChange: function(e, state) { 
 
    $('#hideableDiv').toggle(state); 
 
    } 
 
});
.hiddenByDefault { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.2/js/bootstrap-switch.min.js"></script> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap-theme.css" /> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.2/css/bootstrap2/bootstrap-switch.min.css" /> 
 

 
<div class="container"> 
 
    <label> 
 
    <input type="checkbox" name="my-checkbox" onclick="documentFilter(this, '#hideableDiv')">Some caption 
 
    </label> 
 

 
    <div id="hideableDiv" class="hiddenByDefault">Some hidable content 
 
    </div> 
 
</div>