2016-10-17 5 views
0

나는 bootstraptoggle.com에서 토글을 가지고 있으며 버튼 안에 넣습니다. Chrome에서는 작동하지만 Firefox에서는 작동하지 않습니다. 버튼을 클릭 할 때 버튼을 눌렀을 때 체크하거나 체크하기 위해 강제로 토글 또는 체크 박스를 강제 실행하는 방법은 무엇입니까? 각 서로 클릭 후 확인하고 선택을 취소 jquery 함수가 필요합니다.버튼 내의 토글/체크 박스

JSP는 :

여기
<button id="topology_button" type="button" 
          class="btn btn-default">Portfolio 
           <input type="checkbox" class="expander" id="toggle" 
            data-on="Portfolio" data-off="Topology" checked 
            data-toggle="toggle" data-onstyle="success"> 
          Topology 
         </button> 

JQuery와는, 나는 그것을 추가 할 것입니다. 그러므로 이상한 클릭은 상자/토글을 선택 취소합니다.

$(document).ready(function() { 
$('#toggle').change(function() { 
    if (this.checked) 
     $('#project-list-area').fadeIn('slow'), 
     $('#topology').fadeOut('slow'); 
    else 
     $('#topology').fadeIn('slow'), 
     $('#project-list-area').fadeOut('slow'); 
}); 

});

+0

일반적으로 버튼 요소 안에 입력 요소를 넣는 것은 다소 이상합니다. 이것이 나타내는 어떤 것을 구현하는 더 좋은 방법은 없을까요? (그런데, Java! = JavaScript.) – nnnnnn

+0

이것은 Java와 어떤 관련이 있습니까? –

+1

버튼의 클릭 이벤트에 대한 토글을 변경하십시오. 또한 우리의 관심사에 대한 그것은 단지 일반적인 HTML 일 뿐이며, Java/JSP 태그는 필요하지 않습니다. –

답변

0
<!DOCTYPE html> 
<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script> 
$(document).ready(function(){ 
$('#toggle').change(function() { 

    if (this.checked) 
{ 

     $('#project-list-area').fadeIn('slow'); 
     $('#topology').fadeOut('slow'); 
} 
    else 
{ 

     $('#topology').fadeIn('slow'); 
     $('#project-list-area').fadeOut('slow'); 
} 
}); 
}); 
</script> 
</head> 
<body> 
<button id="topology_button" type="button" 
          class="btn btn-default">Portfolio 
           <input type="checkbox" class="expander" id="toggle" 
            data-on="Portfolio" data-off="Topology" checked 
            data-toggle="toggle" data-onstyle="success"> 
          Topology 
         </button> 

<div id='project-list-area'> 
project-list-area 
</div> 
</body> 
</html> 
+0

무엇이 바뀌 었습니까? 나는 아무런 차이가 없다 ... –