jquery在加载时获取已检查单选按钮的值或更改

时间:2015-05-21 16:38:19

标签: javascript jquery html

获得此脚本获取已检查单选按钮的值并将其打印在另一个标记中。单击单选按钮时效果很好,但我已经意识到我需要默认选中一些单选按钮。

如何更改此脚本以便它还会在页面加载时输出已检查的单选按钮的值?

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

1 个答案:

答案 0 :(得分:1)

您可以使用:checked选择器在加载时查找所有已检查的:radio元素,并在其上循环以设置相关.value元素的值。试试这个:

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

Example fiddle

请注意,您应该使用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);
}

Example fiddle