如何使用jquery或javascript选择第一个无线电作为默认值

Question

我有这样的代码。

我的主要目标是当我单击单选按钮时，我会显示内容。 然而 我希望选择第一个收音机作为默认值并显示div 内容。

但是，现在为了显示第一个内容，我必须单击单选按钮。

我怎样才能做到这一点？

顺便说一句，我不依赖于Jquery。 整个想法甚至可以用原生的Javascript编写。

$(':radio').change(function (event) {
var id = $(this).data('id');
$('#' + id).addClass('none').siblings().removeClass('none');
});

.none {
display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name='thing' value='valuable' data-id="bank" />
<input type="radio" name='thing' value='valuable' data-id="school" />
<hr />
<div id="bank" class="none">Bank</div>
<div id="school" class="none">School</div>

Answer 1

实现此目的的最简单方法是在 HTML 中设置checked属性，然后在页面加载时触发该元素上的change事件，如下所示：

$(':radio').change(function(e) {
var id = $(this).data('id');
$('#' + id).addClass('none').siblings().removeClass('none');
}).filter(':checked').trigger('change');

.none {
display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name='thing' value='valuable' data-id="bank" checked="true" />
<input type="radio" name='thing' value='valuable' data-id="school" />
<hr />
<div id="bank" class="none">Bank</div>
<div id="school" class="none">School</div>

或者，如果您不想修改 HTML，则可以设置要以编程方式检查的第一个无线电，如下所示：

$(':radio').change(function(e) {
var id = $(this).data('id');
$('#' + id).removeClass('none').siblings('div').addClass('none');
}).first().prop('checked', true).trigger('change');

.none {
display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name='thing' value='valuable' data-id="bank" />
<input type="radio" name='thing' value='valuable' data-id="school" />
<hr />
<div id="bank" class="none">Bank</div>
<div id="school" class="none">School</div>

Answer 2

您可以将checked设置为true，然后触发change事件，例如

$("input[data-id='bank']").prop("checked", true).trigger("change")

这是片段

$(':radio').change(function (event) {
var id = $(this).data('id');
$('#' + id).addClass('none').siblings().removeClass('none');
});
$("input[data-id='bank']").prop("checked", true).trigger("change")

.none {
display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name='thing' value='valuable'  data-id="bank" />
<input type="radio" name='thing' value='valuable' data-id="school" />
<hr />
<div id="bank" class="none">Bank</div>
<div id="school" class="none">School</div>

Answer 3

这应该可以解决问题：

// Get all radios, then simply emulate a click on the first one
var radios = document.getElementsByTagName('input');
radios[0].click();