如何验证引导单选按钮

Question

我正在尝试验证表单的这一部分，但无论选择哪个按钮，option1 都会返回 false。如何让每个收音机在它们处于活动/非活动状态时具有不同的值，或者从按钮组中获取值？

$(function register(){
$('.err').hide();
$("#submit").click(function() { 
if  ($('#option1').prop("checked", false)){
        $("#fcerr").show();
    }
if  ($('#option1').prop("checked")){
    $("#fcerr").hide();
}
    });
});

<div class="btn-group btn-group-justified btn-group-sm" data-toggle="buttons">
       <label id="lopt1" class="btn btn-primary">
       <input type="radio" name="option1" id="option1" autocomplete="off"> Staff
       </label>
       <label id="lopt2" class="btn btn-primary">
       <input type="radio" name="option2" id="option2" autocomplete="off"> Client
       </label>
</div>
<div><label class="err" id="fcerr">Error Message</label></div>

<input name="register" type="submit" value="Register" class="btn btn-primary btn-lg btn-block" id="submit">

我也尝试过获取单选框的值，但无论哪个收音机处于活动状态，它们总是“打开”。

var client = $("#option2").val();
alert(client);

Answer 1

使用您的代码：

if  ($('#option1').prop("checked", false)){
    $("#fcerr").show();
}

实际上，您每次都将属性“checked”设置为 false。完成后，if 语句接收到一个真实值，因此它将执行 if 块中的内容。

尝试像这样进行验证：

if($('#option1').is(':checked')){
    //...
}

此外，如果您希望您的输入实际上表现为一个组（意味着在给定时间只能检查一个），您必须共享相同的 name 属性，您可以将您的 html 更新为：

<label id="lopt1" class="btn btn-primary">
       <input type="radio" name="myOptions" id="option1" autocomplete="off"> Staff
       </label>
       <label id="lopt2" class="btn btn-primary">
       <input type="radio" name="myOptions" id="option2" autocomplete="off"> Client
       </label>

Answer 2

一些事情：

1. 您的代码 sn-p 中没有包含 javascript 框架，尽管您的问题带有 jQ​​uery 标记。
2. 第 4 行 if ($('#option1').prop("checked", false)){ 正在更改您尝试评估的值。
3. 如果要将选项元素视为可以验证的组，则它们应共享相同的名称属性