如何使用jQuery根据单选按钮是否选中显示内容

Question

我被某件事困住了。我有一个表单，其中的字段仅在选中特定单选按钮时显示。当有人第一次使用以下代码填写表单时，这很容易。

HTML

<fieldset id="question">
  <legend>This is my question</legend>
  <label for="answerYes">Yes</label>
  <input name="answer" id="answerYes" type="radio" value="1" />
  <label for="answerNo">No</label>
  <input name="answer" id="answerNo" type="radio" value="0" />
</fieldset>

jQuery

$("#subQuestion").hide();
$("#answerYes").click(function() {
  $("#subQuestion").show();
});
$("#answerNo").click(function() {
  $("#subQuestion").hide();
});

当有人返回表单进行编辑时，此逻辑就会崩溃。在这种情况下，字段已预先填充，因此单击功能不存在。如果在页面加载时选中#answerYes，我如何使用 jQuery 显示#subQuestion。

Answer 1

尝试在页面中添加 $(document).ready() 处理程序...

$(document).ready(function(){
  // do your checks of the radio buttons here and show/hide what you want to
  $("#subQuestion").hide();
  if ($("#answerYes:checked").length > 0){ $("#subQuestion").show(); }

  // add functionality for the onclicks here
  $("#answerYes").click(function() {
    $("#subQuestion").show();
  });

  $("#answerNo").click(function() {
    $("#subQuestion").hide();
  });
});

一旦页面完全加载（并动态预填充值），该处理程序就会触发

Answer 2

将逻辑附加到 change() 事件*。此外，您可以使用 :checked 选择器来获取当前选定的单选按钮。

<input name="food" type="radio" value="apples" />
<input name="food" type="radio" value="oranges" />

--

$(":radio[name='food']").change(function(){
  var newVal = $(":radio[name='food']:checked").val();
  if (newVal == "apples") {
    $("#someBox").show();
  } else {
    $("#someBox").hide();
  }
});

^{* 有些人报告了更改的问题，并改为
使用click()来处理逻辑}

Answer 3

将所有渲染逻辑保留在单个函数中，并在文档返回时调用该函数：

function renderSubquestion() {
  $('#subQuestion').toggle($("#answerYes").attr('checked'));
}

$(function(){
  $('#answerNo').click(renderSubquestion);
  $('#answerYes').click(renderSubquestion);
  renderSubquestion();
}

Answer 4

如果答案在服务器端，例如通过 PHP，那么您应该使用服务器端代码设置 #subQuestion 的样式：

if($databaseFieldForAnswer != 1){
    $subDiv = '<div style=\"visibility: hidden\"></div>';
}

...更好的是，分配一个类来处理是否显示 div。