帮助 javascript 隐藏单选按钮答案

【问题标题】：Help with javascript to hide radio buttons帮助 javascript 隐藏单选按钮
【发布时间】：2010-09-15 17:28:42
【问题描述】：

我最近在这里得到了这个代码

<script type='text/javascript'>
 $('#discountselection').hide();

    $('#No').click(function(){
        $('#discountselection').hide();
    });

    $('#Yes').click(function(){
        $('#discountselection').show();
    });
</script>

目的是根据是否选择了单选按钮是和否来隐藏下拉框。这是我的代码：

<td width="338">Would You like to avail of our multiyear discounts?*
  <br />See <a href="Pricing">Pricing</a> for more details
</td>
<td colspan="4">
  <input name="discount" type="radio" id="Yes" value="Yes" />Yes
  <input name="discount" type="radio" id="No" value="No" checked="checked" />No<br />  
     <select class="purple" name="discountselection" id="discountselection">
         <option value="1" selected="selected">1 Year</option>
         <option value="2">2 Years</option>
         <option value="3">3 Years</option> 
      </select>                  
</td>

我在 head 标签之间放置了 javascript，但由于某种原因，这对我不起作用。我根本不熟悉javascript。如果有人能看出我哪里出错了，这将是一个很大的帮助。谢谢。

【问题讨论】：

你包含了 jQuery 吗？这个脚本似乎使用它。
“在标签之间”是什么意思？什么标签？
@halfdan..我以为我的问题已经解决了，因为我忘记链接到 jquery 文件，但后来我做到了但是它仍然无法正常工作。 @annakata - 抱歉，我的意思是标题标签，由于某种原因 head 没有显示。

标签： javascript jquery drop-down-menu radio-button

【解决方案1】：

你的代码很好，你只需要用准备好的处理程序包装它。

像这样，

$(function() {
    $('#discountselection').hide();

    $('#No').click(function() {
        $('#discountselection').hide();
    });

    $('#Yes').click(function() {
        $('#discountselection').show();
    });
});

你也可以像这样缩短你的代码，

$(function() {
    $('#discountselection').hide();
    $('#Yes, #No').click(function() {
        $('#discountselection').toggle(this.value==='Yes');
    });
});

【讨论】：

谢谢，这么简单但很重要的事情！

【解决方案2】：

如果你不需要 jQuery，这里有一种方法

<script type="text/javascript">
function showDiscount(show) {
  document.getElementById('discountselection').style.display=(show)?'block':'none';
}
window.onload=function() {
  showDiscount(document.getElementById('discountYes').checked);
}
</script>
<table>
<tr>
<td width="338">Would You like to avail of our multiyear discounts?*
  <br />See <a href="Pricing">Pricing</a> for more details
</td>
<td colspan="4">
  <input name="discount" type="radio" id="discountYes" value="Yes" onclick="showDiscount(this.checked)"/>Yes
  <input name="discount" type="radio" id="discountNo" value="No" checked="checked" onclick="showDiscount(!this.checked)"/>No<br />  
     <select class="purple" name="discountselection" id="discountselection" style="display:none">
         <option value="1" selected="selected">1 Year</option>
         <option value="2">2 Years</option>
         <option value="3">3 Years</option> 
      </select>                  
</td>
</tr>
</table>

【讨论】：

【解决方案3】：

您使用的$() 语法是jQuery 语法，而不是纯Javascript。 JQuery 是一个 Javascript 库，它在普通 JS 上添加了附加功能。如果您使用此语法，则需要包含 JQuery 库。

即使没有 JQuery，您想要实现的目标也相对简单，但如果您不打算使用 JQuery，代码看起来会完全不同。

如果您打算使用 JQuery，您的代码需要包装在一个文档就绪块中，以便正确初始化。

【讨论】：

【解决方案4】：

代码对我来说很好用。

如果对您不起作用，请尝试以下方法：

确保 jQuery 已正确包含并正常工作
将您的事件处理代码放在任何位置在带有这些元素的标记之后

【讨论】：

嗨，Delan，我想你完全复制了我的代码？我只是不明白它可能是什么。这段代码甚至可以在 jsfiddle 上运行，但它似乎对我没有用。
应该是评论...您可能希望在任何反对票发生之前删除它；）
完成，我添加了一些确定的提示。