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

Display text field that matches radio button when page loads

本文关键字：文本 字段 单选按钮 加载 显示      更新时间：2023-09-26

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

我知道它为什么这样做了，因为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");
    }
 });

这将在您的场景中工作:

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

我想这样做:

$('li:not(:first)').hide();
$(".radio_buttons").click(function () {
    $('li').hide();
    $('#field' + $(this).val().split('_')[1]).show()
});
$(".radio_buttons:checked").click();
<<p> jsFiddle例子/strong>
相关文章：