Select and trigger click event of a radio button in jquery

Question

Upon document load, am trying to trigger the click event of the first radio button.... but the click event is not triggered .Also, tried 'change' instead of click ...but its the same result.

$(document).ready(function() {
    //$("#checkbox_div input:radio").click(function() {

    $("input:radio:first").prop("checked", true).trigger("click");

    //});



    $("#checkbox_div input:radio").click(function() {

      alert("clicked");

    });

});

Please follow the below link to the question

Example: http://jsbin.com/ezesaw/1/edit

Please help me out in getting this right. Thanks!

Answer 1

You are triggering the event before the event is even bound.

Just move the triggering of the event to after attaching the event.

$(document).ready(function() {
  $("#checkbox_div input:radio").click(function() {

    alert("clicked");

   });

  $("input:radio:first").prop("checked", true).trigger("click");

});

Check Fiddle

Answer 2

Switch the order of the code: You're calling the click event before it is attached.

$(document).ready(function() {
      $("#checkbox_div input:radio").click(function() {

           alert("clicked");

      });

      $("input:radio:first").prop("checked", true).trigger("click");

});

Answer 3

我的解决方案有点不同：

$( 'input[name="your_radio_input_name"]:radio:first' ).click();

Answer 4

In my case i had to load images on radio button click, I just uses the regular onclick event and it worked for me.

 <input type="radio" name="colors" value="{{color.id}}" id="{{color.id}}-option" class="color_radion"  onclick="return get_images(this, {{color.id}})">

<script>
  function get_images(obj, color){
    console.log($("input[type='radio'][name='colors']:checked").val());

  }
  </script>