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

Answer 2

我会这样做：

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

<强> jsFiddle example

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

2 个答案: