如何验证 jquery 中的单选按钮？答案

【问题标题】：How to validate radio buttons in jquery?如何验证 jquery 中的单选按钮？
【发布时间】：2017-01-10 10:23:40
【问题描述】：

这是我的代码，我希望当我提交表单并且单选按钮未选中时，它应该将单选按钮轮廓更改为红色。如何更改轮廓单选按钮的颜色？

$('#btn').click(function () {
    if ($('input[name=gender]:checked').length <= 0) {
        $("#bordergen").css('border-color', 'red');
    }
    else {
        $("#bordergen").css('border-color', '#ccc');

    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
        <label class="col-md-3 col-sm-3 col-xs-12 control-label">Gender<span class="required">*</span></label>
        <div class="col-md-9 col-sm-9 col-xs-12">
            <div class="radio">
                <label>
                    <input id="bordergen" type="radio" class="flat" required='required' value="Man" name="gender">
                    Man
                </label>
            </div>
            <div class="radio">
                <label>
                    <input id="bordergen" type="radio" class="flat" required='required' value="Women" name="gender">
                    Woman
                </label>
            </div>
        </div>
    </div>

    <div class="form-group">
        <div class="col-md-6 col-sm-6 col-xs-12 col-md-offset-3">
            <input type='submit' id="btn" name='btn' value='Submit' class="btn btn-success" />
        </div>
    </div>

【问题讨论】：

标签： jquery html css validation

【解决方案1】：

$('#btn').click(function () {
    if ($('input[name=gender]:checked').length <= 0) {          
        $("#bordergen").css('outline', '1px solid red');
    }
    else {          
        $("#bordergen").css('outline', '1px solid #ccc');
    }
});

请试试这个....

【讨论】：

【解决方案2】：

您不能轻易更改默认收音机的颜色。

但您可以使用自定义广播脚本，例如：http://icheck.fronteed.com/

或者只是改变文本标签的颜色。

【讨论】：

【解决方案3】：

你可以使用jQuery.closest()函数。

我们可以在 HTML 标签而不是单选按钮中应用 CSS。

$('#btn').click(function () {
    if ($('input[name=gender]:checked').length <= 0) {      
        $('input[name=gender]').css('outline', '1px solid red');
    }
    else {        
        $('input[name=gender]').css('outline', 'none');

    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
        <label class="col-md-3 col-sm-3 col-xs-12 control-label">Gender<span class="required">*</span></label>
        <div class="col-md-9 col-sm-9 col-xs-12">
            <div class="radio">
                <label>
                    <input type="radio" class="flat" required='required' value="Man" name="gender">
                    Man
                </label>
            </div>
            <div class="radio">
                <label>
                    <input type="radio" class="flat" required='required' value="Women" name="gender">
                    Woman
                </label>
            </div>
        </div>
    </div>

    <div class="form-group">
        <div class="col-md-6 col-sm-6 col-xs-12 col-md-offset-3">
            <input type='submit' id="btn" name='btn' value='Submit' class="btn btn-success" />
        </div>
    </div>

请检查一下我上面的sn-p好吗？

【讨论】：