CODEWITHSUNDEEP
javascriptjqueryhtmlradio-button
user6738171
user6738171

Reputation: 1007

Select first radio button by default

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>

Upvotes: 0

Views: 1495

Answers (4)

Amir shah
Amir shah

Reputation: 317

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>

Upvotes: 0

Mohamed-Yousef
Mohamed-Yousef

Reputation: 24001

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)')

Upvotes: 2

Harry Punia
Harry Punia

Reputation: 61

Solution

checked attribute will solve this

Here is the code snippet

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

Upvotes: 1

user3423254
user3423254

Reputation: 34

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" />

Upvotes: 1

Related Questions