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>

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

这code in action。

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，以免混淆和添加不必要的代码。

Answer 3

由于这是一个相当基本的问题，我认为在回答您的问题时，将指导您完成jQuery文档。如果您对jQuery一无所知，我建议您首先遵循这个简短的教程 - 它将使您在将来更轻松，更轻松：jQuery Documentation - Getting Started With jQuery

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

<强> 1。查找单选按钮

在这里查看jQuery Selector文档：http://api.jquery.com/category/selectors/

正如您所看到的，有一个特定的伪选择器用于单选按钮，“：radio”。我们想用ID“按钮”选择元素内部的所有内容，所以这就是选择器的总体外观：

$("#buttons input:radio");

顺便说一句，它被称为“伪选择器”，因为它过滤了我们已经选择的项目（在这种情况下，输入标签位于具有id“button”的div内）。伪选择器总是以“：”开头。

<强> 2。点击它们后会发生一些事情

请参阅此处的jQuery Events参考：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();
    }
});

对于这个答案的篇幅很抱歉，但希望它比“复制并粘贴这个3行超紧凑解决方案”更有助于你理解jQuery。

Answer 4

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

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

jQuery / JavaScript - 隐藏/显示单选按钮上的待处理下拉框

5 个答案: