点击时从 bootstrap data-toggle="button" 获取价值

Posted 2023-05-08

【中文标题】点击时从 bootstrap data-toggle="button" 获取价值

【英文标题】：Get value from bootstrap data-toggle="button" on click

【发布时间】：2016-07-04 12:43:43

【问题描述】：

我无法使用引导按钮组获取所选单选按钮的值

<form action="cart.php" method="post" id="addtocart">
    <div id="select1" class="product-options " data-toggle="buttons">
        <label class="btn btn-default"><input type="radio" name="option1" value="1"> 1 </label>
        <label class="btn btn-default"><input type="radio" name="option1" value="2"> 2 </label>
        <label class="btn btn-default"><input type="radio" name="option1" value="3"> 3 </label>
    </div>
</form>

进行选择后，我需要获取所选值。我知道我应该能够像这样获得价值：

$("#select1").click(function() 
    var option1 = $("#select1 label.active input").val();
);

或者

$("#select1").click(function() 
    var option1 = $("#select1 input:radio:checked").val();
);

但是，第一次单击时的两种变体都返回“未定义”，而第二次单击时返回的是“之前”选择的值。如何在第一次点击时获取选定的值？

【参考方案1】：

您需要挂钩到无线电本身的change 事件，而不是父div 的click。试试这个：

$("#select1 input:radio").change(function() 
    var optionValue = $(this).val();
    console.log(optionValue);
);

Working example

【参考方案2】：

选定的值可以通过以下方式获得： $("#select1 input:radio:checked").first().val();

注意.first() 添加。