javascript - 单击时获取 Bootstrap 按钮值

Question

我有一个带有多个引导按钮的表单。当用户单击按钮时，我想优化结果。

我遇到的问题是尝试获取在 javascript 函数中单击的按钮**s** 的值，该函数被调用以优化结果。

按钮的代码如下

<div class="row">
    <div class="col-md-6">
        <div class="btn-group" data-toggle="buttons">
            <label class="btn btn-primary active">
                <input type="radio" name="options" id="btnPublic" checked> Public Questions
            </label>
            <label class="btn btn-primary">
                <input type="radio" name="options" id="btnPrivate"> Private Questions
            </label>
        </div>
    </div>
</div>
<br />
<div class="row">
    <div class="col-md-6">
        <div class="btn-group" data-toggle="buttons">
            <label class="btn btn-primary active">
                <input type="radio" name="options" id="btnQuestionsForMe" checked> Questions For Me
            </label>
            <label class="btn btn-primary">
                <input type="radio" name="options" id="btnQuestionsIAsked"> Questions I Asked
            </label>
        </div>
    </div>
</div>

如何在同一函数中通过 JavaScript 获取两个单独按钮的值。

Answer 1

在您的示例中，您只能选中一个单选按钮，因为所有单选按钮名称都称为“选项”。如果您希望用户能够选择四个单选按钮中的两个，您将需要更改要组合在一起的单选按钮的名称。我整理了一个不错的JsFiddle为您提供的示例可以满足您的要求。

您需要将更改事件附加到每个单选按钮，以便您知道按钮何时被选中。示例:

$("#btnQuestionsForMe").change(function(){
   doSomethingWithCheckedRadio()
}); 

下面是使用 jquery 获取所有选中的单选按钮的 javascript 代码:

function getCheckedRadios(){
    var checkedIds = [];        
    $("input[type='radio']").each(function(i, obj){
        if($(this).prop("checked")){
             checkedIds.push($(this).attr("id"));   
        }
    });        
    return checkedIds;
}

希望这有帮助!