bootstrap 3 btn-group click事件

knsnq2tg  于 2023-04-18  发布在  Bootstrap
关注(0)|答案(2)|浏览(142)

我试图找出如何捕捉点击事件。

​<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");
    });
nc1teljy

nc1teljy1#

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

   });

就像每一个按钮...

6mzjoqzu

6mzjoqzu2#

只要用jquery监听所有的btn-group

$('#group_period input').on("click", function() {
 alert(this.id);
 });

相关问题