帮助使用 javascript 隐藏单选按钮

Question

我最近在这里得到了这段代码，

<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>

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

Answer 1

如果您不需要 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>

Answer 2

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

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

如果您计划使用 JQuery，则需要将代码包装在文档就绪块中，以便正确初始化。

Answer 3

该代码对我来说工作得很好。

如果它不适合您，请尝试以下操作：

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

Answer 4

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

像这样，

$(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');
    });
});​