解决方案

Question

我尝试默认选择第一个单选按钮。但是，我尝试过的每个代码都无效。任何帮助将不胜感激。

$('.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>

Answer 1

您只需添加.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>

或 .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>

其他：选择第一个广播电台.eq(0)，.first()，.filter(':eq(0)')，.filter(':nth-child(1)')的很多方法

Answer 2

checked =“ checked”可以解决问题

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

Answer 3

解决方案

选中属性将解决此问题

这是代码段

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

Answer 4

XHTML解决方案：

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

注意，checked属性的实际值实际上并不重要；这只是分配“已选中”的一种方法。重要的是，像“ true”或“ false”一样没有任何特殊含义。

如果您不打算使用XHTML，则可以使代码更加简化：

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

默认情况下选择第一个单选按钮

4 个答案:

解决方案

这是代码段