Question

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

您无法轻易更改默认广播的颜色。

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

或只是更改文字标签的颜色。

Answer 2

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

请试试这个......

Answer 3

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

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

请检查我上面的代码段吗？

如何在jquery中验证单选按钮？

3 个答案: