bootstrap 3 btn-group click事件

时间:2015-12-19 15:30:20

标签: twitter-bootstrap events button

我正在试图弄清楚如何捕获点击事件。

​<div class="btn-group" data-toggle="buttons" id="group_period">
                                        <label class="btn btn-default" for="hrb" data-value="hourly">
                                            <input type="radio" id="hrb" name="period" value="hourly"> Hourly
                                        </label> 
                                        <label class="btn btn-default" for="drb" data-value="daily">
                                            <input type="radio" id="drb" name="period" value="daily"> Daily
                                        </label> 
                                        <label class="btn btn-default" for="wrb" data-value="weekly">
                                            <input type="radio" id="wrb" name="period" value="weekly"> Weekly
                                        </label> 
                                        <label class="btn btn-default active" for="mrb" data-value="monthly">
                                            <input type="radio" id="mrb" name="period" value="monthly"> Monthly
                                        </label> 
                                    </div>

我尝试了以下组合,但都没有效果。

 $('#group_period').change(function() {
          console.log($(this));
        });
     $('#group_period input').change(function() {
          console.log($(this));
        });

     $('#group_period label').on('click', function(event) {
          event.preventDefault(); // To prevent following the link (optional)
          console.log($(this));
        });

     $('#group_period input').on('click', function(event) {
          event.preventDefault(); // To prevent following the link (optional)
          console.log($(this));
        });

     $('#group_period input').on('click', function () {
            $(this).button('complete') // button text will be "finished!"
          });

     $('#group_period label').on('click', function () {
            $(this).button('complete') // button text will be "finished!"
          });


     $('#hrb').on('change', function(event) {
          event.preventDefault(); // To prevent following the link (optional)
          console.log($(this));
        });

    $("#hrb").bind("click", function () {
        $("#rangebox").html("Days: ");
        var select = $("#options");
        $(select).empty();
        for (var i = 1; i <= 30; i++)
            $("#options").append("<option value=" + i + ">" + i + "</option>");
        $(select).val("3");
    });

1 个答案:

答案 0 :(得分:3)

$("#hrb").on("change",function(){

   });

对每一个按钮都这样做......