ボタン内のトグル/チェックボックス

私は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

何を変更しましたか？私は違いが見えない... –

ボタン内のトグル/チェックボックス

答えて

関連する問題