单击获取Bootstrap按钮值

时间:2014-07-31 15:57:03

标签: javascript jquery twitter-bootstrap-3

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

我遇到的问题是尝试在调用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在同一个函数中获取两个单独按钮的值。

1 个答案:

答案 0 :(得分: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;
}

希望这有帮助!