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

Question

得到了该脚本，该脚本获取选中的单选按钮的值并将其打印在另一个标记中。 当您单击单选按钮时，它可以完美工作，但是我意识到我需要默认选中某些单选按钮。

如何更改此脚本，以便在页面加载时也输出已检查的单选按钮的值？

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

小提琴： https : //jsfiddle.net/tactics/bykf31e6/4/

Answer 1

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

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

小提琴的例子

请注意，您应该使用change事件绑定到radio和checkbox元素，以迎合那些使用键盘浏览网站的用户。 同样，如果取消检查单选元素是否具有值（这是多余的，因为它们应始终具有值），则可以简化代码：

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

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

小提琴的例子