Select first radio button by default

Question

I'm trying to select the first radio button by default. However, every code I have tried has not worked. Any help would be appreciated.

jsfiddle - http://jsfiddle.net/te2b5dqy/

$('.radiogroup').change(function(e) {
  const $this = $(this), $link = $("#url");
  $link.html($this.val());
  $link.attr("href", $this.attr("data-url"));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" name="radiogroup" id="radiogroup1" class="radiogroup" value="Google" data-url="https://google.com" />
<input type="radio" name="radiogroup" id="radiogroup2" class="radiogroup" value="Bing" data-url="https://www.bing.com/" />

<a id="url" href="" target="_blank">null</a>

Possible duplicate of [Assign an initial value to radio button as checked](https://stackoverflow.com/questions/4711036/assign-an-initial-value-to-radio-button-as-checked) — ic3b3rg, Dec 30 '18 at 21:44
Why not just set it using html ?? http://jsfiddle.net/te2b5dqy/2/ — Carsten Løvbo Andersen, Dec 30 '18 at 21:44

Mohamed-Yousef · Accepted Answer · 2018-12-30T21:52:54.550

You can simply add .eq(0).click()

$('.radiogroup').change(function(e) {
  const $this = $(this), $link = $("#url");
  $link.html($this.val());
  $link.attr("href", $this.attr("data-url"));
}).eq(0).click(); //<<<<<<< here

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" name="radiogroup" id="radiogroup1" class="radiogroup" value="Google" data-url="https://google.com" />
<input type="radio" name="radiogroup" id="radiogroup2" class="radiogroup" value="Bing" data-url="https://www.bing.com/" />

<a id="url" href="" target="_blank">null</a>

OR .eq(0).prop('checked' , true).change()

$('.radiogroup').change(function(e) {
  const $this = $(this), $link = $("#url");
  $link.html($this.val());
  $link.attr("href", $this.attr("data-url"));
}).eq(0).prop("checked" , true).change(); //<<<<<<< here

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" name="radiogroup" id="radiogroup1" class="radiogroup" value="Google" data-url="https://google.com" />
<input type="radio" name="radiogroup" id="radiogroup2" class="radiogroup" value="Bing" data-url="https://www.bing.com/" />

<a id="url" href="" target="_blank">null</a>

Additional: A lot of ways to select the first radio .eq(0) , .first() , .filter(':eq(0)') , .filter(':nth-child(1)')

score 1 · Answer 2 · answered Dec 30 '18 at 21:44

1

The checked="checked" will do the trick

<input type="radio" name="radiogroup" id="radiogroup1" checked="checked" 
 class="radiogroup" value="Google" data-url="https://google.com" />

answered Dec 30 '18 at 21:44

user3423254

34
5

score 1 · Answer 3 · edited Jun 20 '20 at 09:12

1

Solution

checked attribute will solve this

Here is the code snippet

<input type="radio" checked />
<input type="radio" />

edited Jun 20 '20 at 09:12

Community

1
1

answered Dec 30 '18 at 21:45

Harry Punia

61
3

score 0 · Answer 4 · answered Dec 30 '18 at 21:59

XHTML solution:

<input type="radio" name="radiogroup" id="radiogroup1" class="radiogroup" 
value="Google"  checked="checked" data-url="https://google.com" />

Note, the actual value of checked attribute does not matter actually; it's just a way to assign "checked". Importantly, like "true" or "false" don't have any special meaning.

If you don't aim for XHTML, you can make the code more simplify:

<input type="radio" name="radiogroup" id="radiogroup1" class="radiogroup" 
value="Google" data-url="https://google.com" checked>

Select first radio button by default

4 Answers4

Solution

Here is the code snippet