javascript - jquery 在加载或更改时获取选中的单选按钮的值

Question

得到这个脚本，它获取选中的单选按钮的值并将其打印在另一个标签中。单击单选按钮时效果很好，但我意识到我需要默认选中某些单选按钮。

如何更改此脚本，使其在页面加载时也输出已选中的单选按钮的值？

$("input[type='radio']").click(function(){
    var radioValue = $(this).val();
    if(radioValue){
        $(this).closest('section').find('h2 .value').text(radioValue);
    }
}); 

fiddle :https://jsfiddle.net/tactics/bykf31e6/4/

Answer 1

您可以使用 :checked 选择器在加载时查找所有选中的 :radio 元素，并循环遍历它们以设置相关 的值.value 元素。试试这个:

$(":radio:checked").each(function() {
    $(this).closest('section').find('h2 .value').text(this.value);
});

Example fiddle

请注意，您应该使用 change 事件绑定(bind)到单选按钮和复选框元素，以迎合那些使用键盘浏览网站的用户。此外，如果您取消检查 radio 元素是否具有值(这是多余的，因为它们应该始终具有值)，您可以简化代码:

$("input[type='radio']").change(setText); // when user selects
$(":radio:checked").each(setText); // onload

function setText() {
    $(this).closest('section').find('h2 .value').text(this.value);
}

Example fiddle