javascript - ボタンのTwitterブートストラップonclickイベント-ラジオ

Question

私はTwitterのブートストラップボタンを持っています-ラジオとそれにonclickイベントをフックします。しかし、トリガーされたボタンを確認するにはどうすればよいですか？

私の最初の考えは、単にクラス'active'をチェックすることでしたが、これにより競合状態が発生するはずです（結果は、Twitter Bootstrapイベントまたは自分のonclickイベントのどちらが最初に処理されるかによって異なります）。

Answer 1

これは本当に迷惑なものです。私が使用することになったのはこれです：

まず、data-toggle属性のない単純なボタンのグループを作成します。

<div id="selector" class="btn-group">
    <button type="button" class="btn active">Day</button>
    <button type="button" class="btn">Week</button>
    <button type="button" class="btn">Month</button>
    <button type="button" class="btn">Year</button>
</div>

次に、クリックしたボタンを「アクティブ化」し、他のすべてのボタンを「非アクティブ化」することで、ラジオボタンの効果をシミュレートするイベントハンドラーを作成します。（編集：コメントから統合されたニックのよりクリーンなバージョン。）

$('#selector button').click(function() {
    $(this).addClass('active').siblings().removeClass('active');

    // TODO: insert whatever you want to do with $(this) here
});

Answer 2

Bootstrap 3ではこれは非常に単純ですが、複雑な答えがたくさんあります。

ステップ1：公式のサンプルコードを使用してラジオボタングループを作成し、コンテナーにIDを指定します。

<div id="myButtons" class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
  </label>
</div>

ステップ2：このjQueryハンドラーを使用します。

$("#myButtons :input").change(function() {
    console.log(this); // points to the clicked input button
});

フィドルデモをお試しください

Answer 3

次のようなクリックではなく、変更イベントを使用します。

$('input[name="name-of-radio-group"]').change( function() {
  alert($(this).val())
})

Answer 4

Bootstrap 3の場合、デフォルトのラジオ/ボタングループ構造は次のとおりです。

<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-primary">
        <input type="radio" name="options" id="option1"> Option 1
    </label>
    <label class="btn btn-primary">
        <input type="radio" name="options" id="option2"> Option 2
    </label>
    <label class="btn btn-primary">
        <input type="radio" name="options" id="option3"> Option 3
    </label>
</div>

そして、あなたはこのようにアクティブなものを選択することができます：

$('.btn-primary').on('click', function(){
    alert($(this).find('input').attr('id'));
}); 

Answer 5

自分でトグル動作を制御できるように、data-toggle属性を使用しないでください。したがって、「競合状態」を回避します

私のコード：

ボタングループテンプレート（.erbで記述され、Ruby on Rails用に埋め込まれたRuby）：

<div class="btn-group" id="featuresFilter">
     <% _.each(features, function(feature) { %> <button class="btn btn-primary" data="<%= feature %>"><%= feature %></button> <% }); %>
</div>

およびjavascript：

onChangeFeatures = function(e){
        var el=e.target;
        $(el).button('toggle');

        var features=el.parentElement;
        var activeFeatures=$(features).find(".active");
        console.log(activeFeatures);
}

ボタンがクリックされると、onChangeFeatures関数がトリガーされます。

Answer 6

表示するデータの期間を選択できるグラフでも同じことをする必要がありました。

そのため、CSSクラス「btn-group-radio」を導入し、次の控えめなJavaScriptワンライナーを使用しました。

// application.js
$(document).ready(function() {
  $('.btn-group-radio .btn').click(function() {
    $(this).addClass('active').siblings('.btn').removeClass('active');
  });
});

そしてここにHTMLがあります：

<!-- some arbitrary view -->
<div class="btn-group btn-group-radio">
  <%= link_to '1W', charts_path('1W'), class: 'btn btn-default active', remote: true %>
  <%= link_to '1M', charts_path('1M'), class: 'btn btn-default', remote: true %>
  <%= link_to '3M', charts_path('3M'), class: 'btn btn-default', remote: true %>
  <%= link_to '6M', charts_path('6M'), class: 'btn btn-default', remote: true %>
  <%= link_to '1Y', charts_path('1Y'), class: 'btn btn-default', remote: true %>
  <%= link_to 'All', charts_path('all'), class: 'btn btn-default', remote: true %>
</div>

Answer 7

Twitter Bootstrapページ（http://twitter.github.com/bootstrap/base-css.html#forms）のラジオボタンのHTMLの例を見ると、各入力に一意のID属性、つまりoptionsRadios1とが含まれていることがわかりますoptionsRadios2。

完全を期すために、関連するHTMLサンプルスニペットがここに含まれています。

<div class = "controls">
  <label class = "radio">
    <input type = "radio"checked = "" value = "option1" id = "optionsRadios1" name = "optionsRadios">
    オプション1はこれとそれです—それが素晴らしい理由を必ず含めてください
  </ label>
  <label class = "radio">
    <input type = "radio" value = "option2" id = "optionsRadios2" name = "optionsRadios">
    オプション2の缶は別のものであり、それを選択するとオプション1の選択が解除されます
  </ label>
</ div>

したがって、jQueryクリックイベントを使用してから、this参照を使用して、クリックされたHTML要素のIDを確認できます。

$（'。controls'）。find（'input'）。bind（'click'、function（event）{
  if（$（this）.attr（'id'）==='optionsRadios1'）{
    alert（$（this）.attr（'id'））;
  } そうしないと {
    //...他の関数を呼び出す
  }
}）;

Answer 8

HTMLが例に似ている場合、クリックイベントは入力ではなくラベル上で生成されるため、次のコードを使用します 。Htmlの例：

<div id="myButtons" class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
  </label>      
</div>

イベントのJavascriptコード：

$('#option1').parent().on("click", function () {
   alert("click fired"); 
});

Answer 9

私は非常に多くのページを検索しました：私は美しい解決策を見つけました。見てみな：

gitリンク

<!DOCTYPE html>
<html>
<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>

    <script>
        $(function() {
            $("#my_launch_today_chk").change(function() {
                var chk = $(this).prop('checked');
                if(chk == true){
                    console.log("On");
                }else{
                    console.log("OFF");
                }
            });
        });
    </script>
</head>
<body >

<input type="checkbox" id="my_launch_today_chk" checked data-on="Launch" data-off="OFF" data-toggle="toggle" data-size="small">
</body>
</html>