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，但由于某些原因，这对我不起作用。我根本不熟悉javascript。如果任何人能够看到我出错的地方，这将是一个很大的帮助。感谢。

Answer 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');
    });
});

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

Answer 3

代码对我来说很好。

如果它对您不起作用，请尝试以下几点：

确保正确包含jQuery并且正在运行
将事件处理代码放在之后的标记

之后

Answer 4

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

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

如果您打算使用JQuery，您的代码需要包含在docuemnt ready块中，以便正确初始化。

帮助javascript隐藏单选按钮

4 个答案: