jquery - 单选按钮选择 - 隐藏和显示字段

Question

我正在尝试做一个简单的隐藏/显示效果，具体取决于选中的单选按钮。它无法正常工作，我不确定为什么。我希望隐藏表 (#reprint_oui) 在用户单击“Oui”时SHOW...如果选择“Non”则隐藏。

这是我的 JS 代码:

$(document).ready(function(){

$("input[name$='reprint_group']").click(function(){

var radio_value = $(this).val();

if(radio_value=='Oui') {
    $("#reprint_oui").show("slow");
}
else if(radio_value=='Non') {
   $("#reprint_oui").show("slow");
   }
  });

$("#reprint_oui").hide();

});​

这是我的 HTML:

<h2>Fiche technique de production</h2>
      <table width="100%" border="0">
          <tr>
            <td width="80%">Avons-nous par le passé produit des affiches que vous vous apprêtez à commander?</td>
            <td width="20%"><label for="oui_reprint">Oui</label>
            <input name="reprint_group" type="radio" id="oui_reprint" value="Oui">
            <label for="non_newprint">Non</label>
            <input type="radio" name="reprint_group" id="non_newprint" value="Non"></td>
        </tr>
      </table>
      <table width="100%" border="0" id="reprint_oui">
        <tr>
          <td width="80%">S'agit-il d'une réimpression sans changement?</td>
          <td width="20%"><label for="oui_reprint">Oui</label>
            <input type="radio" name="reprint_sans_changement" id="oui_reprint" value="Oui">
            <label for="non_newprint">Non</label>
            <input type="radio" name="reprint_sans_changement" id="non_newprint" value="Non"></td>
        </tr>
      </table>

这是我的 fiddle

谢谢

Answer 1

当 radio 值为 Non 时，您实际上是在显示表格。将其改为 hide():

if (radio_value == 'Oui') {
  $("#reprint_oui").show("slow");
} else if(radio_value == 'Non') {
  $("#reprint_oui").hide("slow"); // you have show() here
}

DEMO .