jQuery/JavaScript-单选按钮上挂起的隐藏/显示下拉框

我想使下拉列表仅在单击单选按钮选项3时显示，并在选择1或2时将其隐藏。完成这项工作的最佳方式是什么？我对JavaScript有一点经验，对jQuery几乎没有经验，但这似乎是一条可行之路

谢谢你的帮助， 丹

以下是我目前拥有的HTML代码：

<p class="help">Selection:</p>

<div id='buttons'>
  <label><input type="radio" name="select" /> Option 1 </label>
  <label><input type="radio" name="select" /> Option 2</label>
  <label><input type="radio" name="select" /> Option 3</label>
</div>
<div id="list" style="display: none;">
  <label>Please Select From the List: 
    <select>
      <option>True</option>
      <option>False</option>
    </select>
  </label>
</div>

---

假设您使用的是jquery，正如您的问题所述，您可以这样修改HTML：

<p class="help">Selection:</p>
    <div id='buttons'>
        <label><input type="radio" name="select" id="option1" /> Option 1 </label>
        <label><input type="radio" name="select" id="option2" /> Option 2</label>
        <label><input type="radio" name="select" id="option3" /> Option 3</label>
    </div>
    <div id="list">
        <label>Please Select From the List: 
            <select id="mySelect">
                <option>True</option>
                <option>False</option>
            </select>
        </label>
    </div>​
</p>

您可以看到它在这里工作：

编辑：我删除了不需要的类，只是使用了id，以避免混淆和添加不必要的代码

<label><input type="radio" name="select" onclick="document.getElementById('list').style.display=this.checked?'':'none'" /> Option 3</label>

---

这是。

因为这是一个相当基本的问题，所以我认为在回答您的问题时，带您浏览jQuery文档会很有指导意义。如果您真的对jQuery一无所知，我建议您首先学习这篇简短的教程，它将使您在将来的工作变得更加轻松：

您的要求是，在这种情况下，当我们单击单选按钮时，会隐藏/显示另一个元素。这个问题有两个部分：首先，我们需要找到单选按钮，然后当我们点击它时，我们需要使事情发生

一,。查找单选按钮

在这里查看jQuery选择器文档：

如您所见，单选按钮有一个特定的伪选择器：radio。我们希望使用ID按钮选择元素内部的所有内容，因此选择器的总体外观如下：

$("#buttons input:radio");

顺便说一句，它被称为伪选择器，因为它过滤我们在本例中已经选择的项，即使用id按钮在div中输入标记。伪选择器始终以：

二,。当我们点击它们时，让它们发生

请参阅此处的jQuery事件参考：

我们想要这个。很明显，点击这里。一旦我们选择了元素，我们就可以像这样对它们应用单击处理程序：

$("#buttons input:radio").click(function() {
    // make something happen here
    alert("input button clicked: " + $(this).index());
});

请注意，这将对所有三个输入按钮应用相同的单击处理程序，但您可以通过this关键字访问单击的特定元素。将$包装在它周围，使其成为jQuery选择，而不仅仅是一个Javascript对象，并允许我们对其调用jQuery函数

三,。有条件地隐藏和显示列表元素

让我们扩展上面的代码以实际隐藏和显示另一个div，具体取决于单击的项目。我们将参考jQuery Effects文档，以便使隐藏和显示变得令人兴奋：

我们将使用的函数是.slideUp（隐藏元素）和.slideDown（显示元素）。我们还将使用我在上一个示例中使用的.index函数来确定单击了哪个按钮，尽管我建议将来给按钮一个唯一的ID，这样代码就不会依赖于按钮的顺序。以下是最终代码：

$("#buttons input:radio").click(function() {
    // if it was the third button (0-indexed, so the 3rd one is index 2)...
    if ($(this).index() == 2) {
        // display the element with ID "list"
        $("#list").slideDown();
    }
    else {
        // hide the element with ID "list"
        $("#list").slideUp();
    }
});

---

很抱歉，这个答案太长，但希望它比复制并粘贴这个3行超级紧凑解决方案更有助于您理解jQuery。

无需更改标记：

$(function()
{
    $("#list").hide();
    $("#buttons input:radio[name=select]").click(function()
    {
      var myindex = $("#buttons input:radio[name=select]").index(this);
      if (myindex == 2)
      {
         $("#list").show();
      }
      else
      {
        $("#list").hide();
      };
    });
});

编辑：另一个选项：只需在列表的最后一个按钮上显示它

$(function()
{
    $("#list").hide();
    $("#buttons input:radio[name=select]").click(function()
    {
      var myindex = $("#buttons input:radio[name=select]").index(this);
      var lastone = $("#buttons input:radio[name=select]:last").index("#buttons input:radio[name=select]");
      if (myindex == lastone)
      {
         $("#list").show();
      }
      else
      {
        $("#list").hide();
      };
    });
});

---

@杰克，你说得对。我假设当页面加载时，他会相应地设置所有内容。这是有效的，除了上面描述的第一次加载时不起作用。你的onclick不正确，我相信你的意思是onclick=document.getElementById'list'。style.display=？：'none'，但这只在我通常不使用内联JS时起作用，看来我搞错了。如何：onclick=function{document.getElementById'list'.style.display=this.checked？：'none'；}立即工作。谢谢你的帮助，也谢谢这里的整个社区，非常非常的有帮助，谢谢你的《费萨尔邮报》。我现在正在研究jquery。感谢您提供的帮助性回复。您还需要介绍页面先加载的情况，但是如果您对jQuery有很好的了解，那么解决方案应该很简单：没问题……我正在尝试全面回答问题，而不仅仅是快速回答，不幸的是，你是我的第一个受害者，呵呵。注意：如果页面上有其他类似的控件，使用按钮和列表可以更快、更具体。

$(function()
{
    $("#list").hide();
    $("#buttons input:radio[name=select]").click(function()
    {
      var myindex = $("#buttons input:radio[name=select]").index(this);
      if (myindex == 2)
      {
         $("#list").show();
      }
      else
      {
        $("#list").hide();
      };
    });
});

$(function()
{
    $("#list").hide();
    $("#buttons input:radio[name=select]").click(function()
    {
      var myindex = $("#buttons input:radio[name=select]").index(this);
      var lastone = $("#buttons input:radio[name=select]:last").index("#buttons input:radio[name=select]");
      if (myindex == lastone)
      {
         $("#list").show();
      }
      else
      {
        $("#list").hide();
      };
    });
});