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!

first write click event function then call it with trigger

Davor Zubak
– Davor Zubak

2013-07-31 20:36:26 +00:00
Commented Jul 31, 2013 at 20:36 — Davor Zubak
– Davor Zubak, Commented Jul 31, 2013 at 20:36

Sushanth -- · Accepted Answer · 2015-08-03 17:45:19Z

56

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

edited Aug 3, 2015 at 17:45

answered Jul 31, 2013 at 20:35

Sushanth --

55.8k9 gold badges70 silver badges109 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jack · Accepted Answer · 2013-07-31 20:36:21Z

18

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");

});

answered Jul 31, 2013 at 20:36

Jack

8,9413 gold badges23 silver badges27 bronze badges

Comments

Pang · Accepted Answer · 2016-06-24 01:00:29Z

5

My solution is a bit different:

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

edited Jun 24, 2016 at 1:00

Pang

10.2k146 gold badges87 silver badges126 bronze badges

answered Jan 26, 2015 at 5:57

inMILD

1982 silver badges12 bronze badges

Comments

Manoj Datt · Accepted Answer · 2017-03-01 12:10:46Z

1

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>

answered Mar 1, 2017 at 12:10

Manoj Datt

3881 gold badge3 silver badges10 bronze badges

Comments

Dharman · Accepted Answer · 2019-10-03 12:40:50Z

1

$("#radio1").attr('checked', true).trigger('click');

edited Oct 3, 2019 at 12:40

Dharman♦

33.9k27 gold badges106 silver badges157 bronze badges

answered Oct 3, 2019 at 6:38

Pankaj sharma

111 bronze badge

1 Comment

Geshode Over a year ago

Please add an explanation to your answer.

Collectives™ on Stack Overflow

Select and trigger click event of a radio button in jquery

5 Answers 5

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related