Javascript 页面加载时显示与单选按钮匹配的文本字段

默认情况下，将选择第一个单选按钮，显示第一个文本字段，隐藏其余文本字段。 但有时，如果我编辑内容，会选择第二个或第三个单选按钮。如果是这种情况，则结果相同，第一个文本字段显示，其他文本字段隐藏

我可以理解它为什么这样做，因为

click（）

。我使用

change（）

尝试了一种不同的方法，但这当然也行

以下是JSFIDLE：

HTML:

我会这样做：

$('li:not(:first)').hide();
$(".radio_buttons").click(function () {
    $('li').hide();
    $('#field' + $(this).val().split('_')[1]).show()
});
$(".radio_buttons:checked").click();

---

这将在您的场景中起作用：

// A function to check the items.
function checkFields(el) {
    // The radio value.
    var sel = $(el).val();

    // Toggle the fields visibility accordingly.
    $("#field1").toggle(sel == "radio_1");
    $("#field2").toggle(sel == "radio_2");
    $("#field3").toggle(sel == "radio_3");
}

$(function () {
    // On page load you call the checking passing the radio that's
    // checked by default.
    checkFields($(".radio_buttons:checked"));

    // When a radio is clicked, call that same function.
    $(".radio_buttons").on("click", function () { checkFields(this); });
});

---

它正在工作，但此行隐藏了错误的字段：

$（“#field2，#field3”）.css（“display”，“none”）

，因为您的第一个选择是

单选按钮。\u 2

。这是因为如果单选按钮未预先选择。。。它应该显示第一个文本字段，并隐藏其他两个文本字段。我将在我的描述中指定它。我不明白什么是

$（[li[id^=field]：not（：hidden）”）.hide（）用于。似乎不需要。工作时不必担心。你能进一步解释一下吗？你说得对。不需要。它应该隐藏所有
li
，这些
id
以
字段开始，并且尚未隐藏。我将编辑答案。
$('li:not(:first)').hide();
$(".radio_buttons").click(function () {
    $('li').hide();
    $('#field' + $(this).val().split('_')[1]).show()
});
$(".radio_buttons:checked").click();

// A function to check the items.
function checkFields(el) {
    // The radio value.
    var sel = $(el).val();

    // Toggle the fields visibility accordingly.
    $("#field1").toggle(sel == "radio_1");
    $("#field2").toggle(sel == "radio_2");
    $("#field3").toggle(sel == "radio_3");
}

$(function () {
    // On page load you call the checking passing the radio that's
    // checked by default.
    checkFields($(".radio_buttons:checked"));

    // When a radio is clicked, call that same function.
    $(".radio_buttons").on("click", function () { checkFields(this); });
});