jQuery's trigger method doesn't work properly on document ready

Question

I have some functionality that changes an HTML element based on the choice of the radio input, and that's working fine. However, for the initial setup of the element, instead of duplicating the conditioning and the code again, it would be much shorter and clearer to just invoke the radio 's trigger('change') method which then does all the work. This doesn't seem to work properly (in Firefox or Chrome). As much as I figure, it always treats the last radio in the document as the checked one.

A sample is here: http://jsfiddle.net/jydf5gby/

The initial color of the button should be red, but it comes up as blue. Why is that, and what is the solution?

HTML:

<p><input type="radio" name="radio" value="red" checked="checked"/> red</p>
<p><input type="radio" name="radio" value="blue"/> blue</p>

<button>button</button>

Javascript:

$(document).ready(function () {
    $('input[name=radio]').change(function () {
        if ($(this).val() == 'red') {
            $('button').css('background', 'red');
        } else {
            $('button').css('background', 'blue');
        }
    }).trigger('change');
});

Answer 1

You're triggering the event on all the radio buttons, not just the selected one. Try:

 $(document).ready(function () { $('input[name=radio]').change(function () { if ($(this).val() == 'red') { $('button').css('background', 'red'); } else { $('button').css('background', 'blue'); } }).filter(":checked").trigger('change'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p><input type="radio" name="radio" value="red" checked="checked"/> red</p> <p><input type="radio" name="radio" value="blue"/> blue</p> <button>button</button> 

Answer 2

You can use it this way:

$(document).ready(function () {
    $('input[name=radio]').change(function () {
        $('button').css('background', $('input[name=radio]:checked').val());
    }).trigger('change');
});

Fiddle

---

As you are triggering the event applied on the radio inputs so you can just apply the values of those radios directly as i put in the answer. This makes your code a bit smaller and you can save a bit of bytes.

Answer 3

You have incorrect selector to target checked radio button value after triggering change event. you need to use:

$('input[name=radio]').change(function () {
    if ( $('input[name=radio]:checked').val() == 'red') {
        $('button').css('background', 'red');
    } else {
        $('button').css('background', 'blue');
    }
}).trigger('change');

Working Demo

Update - Optimized Answer by Rory McCrossan

$(document).ready(function () {
  $('input[name=radio]').change(function () {
      $('button').css('background',  $('input[name=radio]:checked').val());
  }).trigger('change');
});

Demo for optimized code

Answer 4

You are calling trigger for all the radio buttons. You just need to filter() them to the :checked one:

$(document).ready(function () {
    $('input[name=radio]').change(function () {
        if ($(this).val() == 'red') {
            $('button').css('background', 'red');
        } else {
            $('button').css('background', 'blue');
        }
    }).filter(':checked').trigger('change');
});

See Fiddle here

You can also optimize your actual handler to just set the background-color to the current val():

$(document).ready(function () {
    $('input[name=radio]').change(function () {
        $('button').css('background', $(this).val());
    }).filter(':checked').trigger('change');
});

Fiddle here

Answer 5

try this instead

 $(document).ready(function () { $('input[name=radio]').bind("change",function(){ if ($(this).val() == 'red') { $('button').css('background', 'red'); } else { $('button').css('background', 'blue'); } }); $('input[name=radio]:first').click(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p><input type="radio" name="radio" value="red" /> red</p> <p><input type="radio" name="radio" value="blue"/> blue</p> <button>button</button>