选择单选按钮时，如何在标签上添加类别？

Question

I have the following HTML radio buttons and I need to add 'checked' as the class of the label when the relevant radio button is selected. The code below works for clicks, but I also need the class added if one of the buttons is selected without clicking, ie if the radio button was already selected when the page loaded.

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

Here's the js:

  $(document).ready(function(){

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

    });

Answer 1

Just add:

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

jsFiddle example

Answer 2

You just need to initialize your labels when the document is ready:

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

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