按鈕內的切換/複選框

我從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'); 
});

}）;

來源

2016-10-17 Stephen Popovich

將按鈕元素內的輸入元素放在一般情況下是很奇怪的。沒有更好的方法來實現這應該代表什麼？（順便說一句，Java！= JavaScript。） – nnnnnn

這與Java有什麼關係？ –

更改按鈕的單擊事件的切換。此外，這只是我們所關心的普通HTML，不需要Java/JSP標記。 –

<!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>

來源

2016-10-18 04:04:08 Aswathy

你改變了什麼？我沒看出任何區別... –

按鈕內的切換/複選框

回答

相關問題