Question

我有以下HTML单选按钮，我需要添加＆＃39;已检查＆＃39;作为选择相关单选按钮时的标签类。下面的代码适用于点击，但如果选择其中一个按钮而没有点击，我也需要添加该类，即如果在页面加载时已经选择了单选按钮。

<label><input name="radio" type="radio">One</label><br/>
<label><input name="radio" type="radio">Two</label>

这里是js：

  $(document).ready(function(){

    $('label').click(function(){ 
        $('label').removeClass('checked'); 
        $(this).addClass('checked');
    });

    });

Answer 1

只需添加：

$('input:checked').parent().addClass('checked');

<强> jsFiddle example

Answer 2

您只需在文档准备就绪时初始化标签：

＆＃13;

$(document).ready(function () {
    var inputs = $('input[type=radio]');
    inputs.change(function () {
        changeLabelClass(this);
    });
    
    //initialize the labels
    changeLabelClass(inputs)
});

function changeLabelClass(radio) {

    //remove the 'checked' class from all labels
    $('input[type=radio]').closest('label').removeClass('checked')
    
    if ($(radio).is(':checked')) 
        $(radio).closest('label').addClass('checked')
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<label>
    <input name="radio" type="radio" checked>One</label>
<br/>
<label>
    <input name="radio" type="radio">Two</label>

＆＃13;

选择单选按钮后，如何将类添加到标签？

2 个答案: