jQuery/JavaScript - 根据单选按钮的选择隐藏/显示下拉框

Question

我希望只有在单选按钮（选项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>

- Dan

Answer 1

$(document).ready(function(){
  $("[name=select]").change(function(){  // Whenever the radio buttons change
    $("#list").toggle($("[name=select]").index(this)===2);  // Only keep the list open when it's the last option (First option = 0, Third option = 2)
  });
});

以下是代码演示。

- Gert Grenander

---

一开始就运行成功了。感谢您的帮助，以及整个社区在这方面提供的非常有用的帮助。 - Dan

Answer 2

假设您正在使用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>

接着你可以写一些像这样的 jQuery 代码：

$(document).ready(
    function()
    {
        $("#option1, #option2, #option3").click(
            function()
            {
                if (this.id == "option3")
                    $("#mySelect").hide();
                else
                    $("#mySelect").show();
            });
    });​

你可以在这里看到它的运行效果：http://jsfiddle.net/AVFuY/3/ 编辑：我移除了不必要的类并只使用了id，以免混淆和添加不必要的代码。

- spinon

---

@Jake 你说得对。我假定他在页面加载时已经设置好了所有内容。 - spinon

这个程序可以工作，除了如上所述，在第一次加载时它没有工作。 - Dan

Answer 3

由于这是一个相当基础的问题，我认为在回答你的问题时，通过 jQuery 文档向你演示会更有教育意义。如果你对 jQuery 真的一无所知，我建议先跟随这个简短的教程 -- 这将使你未来的工作变得轻松得多：jQuery文档 - 入门指南

你的要求是，当我们点击单选按钮时，发生某些事情（在本例中，另一个元素被隐藏/显示）。这个问题有两个部分：首先，我们需要找到单选按钮，然后我们需要在单击它时执行某些操作。

1. 查找单选按钮

请查看 jQuery 选择器文档，链接在这里：http://api.jquery.com/category/selectors/

正如你所看到的，单选按钮有一个特定的伪选择器 ":radio"。我们想选择 ID 为 "buttons" 的元素内的所有内容，因此选择器总体上看起来像这样：

$("#buttons input:radio");

顺便说一下，它被称为“伪选择器”，因为它过滤了我们已经选择的项目（在这种情况下，是 ID 为“button”的 div 内的 input 标记）。伪选择器始终以“:”开头。

2. 点击它们时让某些事情发生

请查阅 jQuery 事件参考文档：http://api.jquery.com/category/events/

我们在此需要“.click()”事件。一旦我们选择了元素，就可以像这样将单击处理程序应用于它们：

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

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

3.有条件地隐藏和显示列表元素

让我们扩展上面的代码，实际上根据单击的项目隐藏和显示其他div。我们将参考jQuery Effects文档，以便我们可以使其隐藏和显示更加令人兴奋：http://api.jquery.com/category/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();
    }
});

对于这个答案的长度感到抱歉，但希望它对您理解jQuery更有帮助，而不是“复制并粘贴这个三行超紧凑的解决方案”。

- Faisal

---

谢谢你的帖子，Faisal。我现在正在研究jQuery。感谢你提供的有用回复。 - Dan

您还需要考虑页面首次加载的情况，但是如果您对jQuery有很好的理解，解决方案应该很简单。 :) 没问题...我正在尝试全面回答问题，而不仅仅是快速回答，而您不幸成为了我的第一个受害者，呵呵。 - Faisal

Answer 4

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

- R. Hill

---

你的onclick是不正确的，我想你的意思应该是 onclick="document.getElementById('list').style.display=''?'':'none'。 但这只能起作用一次。 - Jake

我通常不使用内联JS，所以看起来我弄错了。 那么怎么样： onclick="function(){document.getElementById('list').style.display=this.checked?'':'none';}" - R. Hill

Answer 5

不更改您的标记：

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

- Mark Schultheiss

---

请注意：使用您的 #按钮 和 #列表，如果页面上有其他类似的控件，这将使其更快和特定。 - Mark Schultheiss