jquery - 单击时从 Bootstrap 数据切换 ="button"获取值

Question

我无法通过 Bootstrap 按钮组获取所选单选按钮的值

<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();
});

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

Answer 1

您需要 Hook radio 本身的 change 事件，而不是父 div 的 click 事件。试试这个:

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

Working example