jQuery recognising incorrect state of radio buttons on page load when radio value=“No” and neither radio is selected

Question

I have radio buttons on a page which add or remove a css class from other elements according to their state.

The class testclass is added to the element slave by default (ie the HTML the page loads is:

<input type="radio" value="No" name="master" /> No
<input type="radio" value="Yes" name="master" /> Yes

<input type="text" name="a" id="slave" class="testclass" />

The following jQuery removes the class if the "No" radio is selected

$("input[name$='master']").change(function(){
    if(this.value === 'No') {
          $('#slave').removeClass('testclass'); 
    } else {
         $('#slave').addClass('testclass');
    }
}); $("input[name$='master']").filter(':checked').change()

This works fine in terms of moving back and forward between the states once the page has loaded, but I am triggering the function on page load and it removes the class at that time, when no check radio is selected. (It's fine if "Yes" is loaded as checked).

Interestingly it is also fine if I reverse the condition such that "Yes" is required to remove the class (page loads with class still there).

I thought javascript might be equating no selection made with a value of "No" hence I tried the strict equality, but no difference.

Any ideas?

Answer 1

I have developed a fiddle for you to consider. Here is the link to it => http://jsfiddle.net/6c7F2/

I think the best way to answer this question is to make you understand a few things about the code you have provided here. I am going to write in comments to it.

$( document ).ready(function(){ // this function is called once your page loads
    $("input[name$='master']").change(function(){
        //this function is not called until you click the radio buttons. 
        // Be careful to note that this function is never called on page load. 
        // You can test it in the fiddle I created
        if(this.value === 'No') {
            $('#slave').removeClass('testclass'); 
            // this alert in the fiddle is called only
            // when you click the radio buttons. Not on page load
            alert("It entered");
        } else {
            $('#slave').addClass('testclass');
        }
    }); 
    $("input[name$='master']").filter(':checked').change()
});

So make sure that the things and checks you want to execute on page load should be outside the scope of $("input[name$='master']").change(function(){});

This is only triggered when you click on radio buttons and not on page load.

Answer 2

It is happening because you have not selected any value on page load and still you are triggering the event.

Try:

Select any checkbox by default.

<input type="radio" value="No" name="radios" checked="checked"/> No

OR

Remove this line

$("input[name$='master']").filter(':checked').change()