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

Question

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

我明白为什么要这样做，因为 click()。我尝试了使用 change() 的不同方法，但当然这也可以。

这是 JSFiddle:http://jsfiddle.net/cEaeK/220/

HTML:

<table width="100">
  <tr>
    <td>
      <input type="radio" name="example" value="radio_1" id="example_1" class="radio_buttons" required />
      Radio 1
    </td>
  </tr>
  <tr>
    <td>
      <input type="radio" name="example" value="radio_2" id="example_2" class="radio_buttons" required  checked="checked" />
      Radio 2
    </td>
  </tr>
  <tr>
    <td>
      <input type="radio" name="example" value="radio_3" id="example_3" class="radio_buttons" required />
      Radio 3
    </td>
  </tr>
</table>
<ul>
  <li id="field1">
    <div>Radio 1:</div>
    <input type="text" name="field1" placeholder="" />
  </li>
  <li id="field2">
    <div>Radio 2:</div>
    <input type="text" name="field2" placeholder="" />
  </li>
  <li id="field3">
    <div>Radio 3:</div>
    <input type="text" name="field3" placeholder="" />
  </li>
</ul>

JQuery:

$("#field2, #field3").css("display","none");
$(".radio_buttons").click(function(){
    if ($('input[name=example]:checked').val() == "radio_1") {
        $("#field1").css("display", "block");
        $("#field2").css("display", "none");
        $("#field3").css("display", "none");
    }
    if ($('input[name=example]:checked').val() == "radio_2") {
        $("#field1").css("display", "none");
        $("#field2").css("display", "block");
        $("#field3").css("display", "none");
    }
    if ($('input[name=example]:checked').val() == "radio_3"){
        $("#field1").css("display", "none");
        $("#field2").css("display", "none");
        $("#field3").css("display", "block");
    }
 });

Answer 1

这适用于您的场景:

// 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); });
});

Demo