Jquery 命名要隐藏/显示的单选按钮

我在表单上有几组单选按钮-它们都需要独立（成对）。当选择一个名为“时间”的集合时，我需要“是”来显示

，而“否”则将其隐藏。 我使用CSS将

设置为隐藏，下面的代码在一组单选按钮上工作，但是当我开始在中添加其他按钮时，我不想在第一组按钮上选择“是”来显示所有的

（为了区分

我将调用它们

，

等等

我如何命名下面脚本中的单选按钮，以仅影响选择了“时间”单选按钮的

<script>
$(document).ready(function(){
    $(":radio:eq(0)").click(function(){
        $("p").show();
    });

    $(":radio:eq(1)").click(function(){
        $("p").hide();
    });
});
</script>

$（文档）.ready（函数（）{
$（“：radio:eq（0）”。单击（函数（）{
$（“p”）.show（）；
});
$（“：radio:eq（1）”。单击（函数（）{
$（“p”）.hide（）；
});
});

HTML是：

 Can we call Ph before 9am: 
<input type="radio" name="9am" value="Yes">Yes
<input type="radio" name="9am" value="No">No<br>
<p class="hidden">Yes We can call Ph before 9am</p>

我们能在上午9点前打电话给Ph吗：
对
否

是的，我们可以在上午9点之前给Ph打电话

更新**

<script>
$(document).ready(function(){
    $(":radio:eq(0)").click(function(){
        $("p").show();
    });
    $(":radio:eq(1)").click(function(){
        $("p").hide();
    });
});
</script>

我不明白的是，jQuery如何知道我在引用这组特定的单选按钮（以及当我添加另一组单选按钮时，它如何知道我在具体引用它们）。我不需要在jQuery中为每组单选按钮添加单选按钮的“名称”来区分它们吗

进一步更新**

<script>
$(document).ready(function(){
    $(":radio:eq(0)").click(function(){
        $("p").show();
    });
    $(":radio:eq(1)").click(function(){
        $("p").hide();
    });
});
</script>

$（文档）.ready（函数（）{
$（“：radio:eq（0）”。单击（函数（）{
$（“p”）.show（）；
});
$（“：radio:eq（1）”。单击（函数（）{
$（“p”）.hide（）；
});
});

HTML

我们能在上午9点前打电话给Ph吗：
对
否

是的，我们可以在上午9点之前致电Ph
脆弱性：
对
否

什么是漏洞：

CSS

p、 隐藏{显示：无；}
h1.hidden{显示：无；}

我已经更新了代码，所以你对我要做的事情有了更好的了解

---

当我在任意一组单选按钮上单击“是”时，它们对两个

部分都有相同的影响。我只希望单选按钮直接影响其下方的

。

u可以简单地使用class=”“属性，如

<p class="set1"> set one </p>
<p class="set2"> set one </p>


<script>
 $(document).ready(function(){
     $(":radio:eq(0)").click(function(){
         $(".set1").show();
      });

      $(":radio:eq(1)").click(function(){
         $(".set2").hide();
      });

});
</script>

---

一种按照编写的方式使用HTML的方法如下：

$('input[type="radio"]').change(function () {
    $(this).nextAll('p.hidden').first().toggle(this.value == 'Yes');
}).change();

<div class="question">
    <label>
    <input type="radio" name="9am" value="Yes" />Yes
    </label>
    <label>
    <input type="radio" name="9am" value="No" checked />No
    </label>
    <br />
    <p class="hidden">Yes We can call Ph before 9am</p>
</div>
<div class="question">
    <label>
    <input type="radio" name="10am" value="Yes" />Yes
    </label>
    <label>
    <input type="radio" name="10am" value="No" checked />No
    </label>
    <br />
    <p class="hidden">Yes We can call Ph before 10am</p>
</div>

稍微改进的HTML，允许用户单击标记元素的文本，因为该文本（以及

输入

都包装在

标签

元素中）如下所示：

$('input[type="radio"]').change(function () {
    $(this).nextAll('p.hidden').first().toggle(this.value == 'Yes');
}).change();

<div class="question">
    <label>
    <input type="radio" name="9am" value="Yes" />Yes
    </label>
    <label>
    <input type="radio" name="9am" value="No" checked />No
    </label>
    <br />
    <p class="hidden">Yes We can call Ph before 9am</p>
</div>
<div class="question">
    <label>
    <input type="radio" name="10am" value="Yes" />Yes
    </label>
    <label>
    <input type="radio" name="10am" value="No" checked />No
    </label>
    <br />
    <p class="hidden">Yes We can call Ph before 10am</p>
</div>

参考资料：

---

对此，您可以使用以下代码

<script>
$(document).ready(function(){
    $("input[type=radio]").click(function(){
      if($(this).attr('value') == 'Yes')
         $("p").show();
      else
         $("p").hide();
    });
});
</script>

$（文档）.ready（函数（）{
$（“输入[type=radio]”。单击（函数（）{
如果（$（this.attr（'value'）=='Yes'）
$（“p”）.show（）；
其他的
$（“p”）.hide（）；
});
});

jQuery的选择器将匹配的元素向下过滤到集合中指定的[zero-based]索引处的元素。给定标记，选择器将匹配以下内容：

Can we call Ph before 9am: 
<input type="radio" name="9am" value="Yes">Yes              <!-- radio:eq(0) -->
<input type="radio" name="9am" value="No">No<br>            <!-- radio:eq(1) -->
<p class="hidden">Yes We can call Ph before 9am</p><br>

Vulnerability:
<input type="radio" name="vulnerabille" value="Yes">Yes     <!-- radio:eq(2) -->
<input type="radio" name="vulnerable" value="No">No<br>     <!-- radio:eq(3) -->
<p class="vulnerability">What is the vulnerability:</p><br>

JavaScript

$('input[type="radio"].question1').on('change click', function(e) {
    $('.question1').show();
});

$('input[type="radio"].question2').on('change click', function(e) {
    $('.question2').show();
});

$('div.question input[type="radio"].question-type-yesno').on('change click', function (e) {
    var self = $(this),
        isChecked = self.is(':checked'),
        val = self.val();
    self.siblings('p.show-confirm-answer').toggleClass('hidden', isChecked && val === 'No'); // applied class if "No" is checked, otherwise removes the "hidden" class.
});

正如我希望通过示例所证明的那样，这将是键盘密集型的，不是一个好的抽象解决方案（这就是为什么不推荐它的原因）

另一种解决方案，也是我推荐的一种，是更改标记，使其更抽象，从而允许使用更通用的处理程序

修订的HTML

Can we call Ph before 9am: 
<input type="radio" name="9am" value="Yes" class="question1">Yes              <!-- radio:eq(0) -->
<input type="radio" name="9am" value="No" class="question1">No<br>            <!-- radio:eq(1) -->
<p class="hidden question1">Yes We can call Ph before 9am</p><br>

Vulnerability:
<input type="radio" name="vulnerabille" value="Yes" class="question2">Yes     <!-- radio:eq(2) -->
<input type="radio" name="vulnerable" value="No" class="question2">No<br>     <!-- radio:eq(3) -->
<p class="vulnerability question2">What is the vulnerability:</p><br>

<div class="question">
    <span class="question-text">Can we call Ph before 9am:</span>
    <input type="radio" id="rdo9AM_y" name="9am" value="Yes" class="question-type-yesno"><label for="rdo9AM_y">Yes</label>
    <input type="radio" id="rdo9AM_n" name="9am" value="No" class="question-type-yesno"><label for="rdo9AM_n">No</label>
    <p class="hidden show-confirm-answer early-call">Yes We can call Ph before 9am</p>
</div>
<div class="question">
    <span class="question-text">Vulnerability:</span>
    <input type="radio" id="rdoVul_y" name="vulnerable" value="Yes" class="question-type-yesno"><label for="rdoVul_y">Yes</label>
    <input type="radio" id="rdoVul_n" name="vulnerable" value="No" class="question-type-yesno"><label for="rdoVul_n">No</label>
    <p class="hidden show-confirm-answer vulnerability">What is the vulnerability:</p><br>
</div>

---

最后，对于不涉及更改标记且抽象的解决方案，请使用（+1，David）提供的[Beauty，Grateful]解决方案。他的解决方案将非常有效，前提是您的其余标记与您已经发布的内容一致。

这个HTML是什么样子的；请给我们展示一个HTML结构的最小示例，以便我们了解发生了什么。这总是很有帮助的。我不明白的是Jquery如何知道我引用了这个特定的c组单选按钮（当我添加另一组按钮时，它如何知道我具体引用了它们）。我不需要在Jquery中为每组单选按钮添加单选按钮的“名称”来区分它们吗？我已经更新了上面的代码，以便您更好地了解我正在尝试做什么。我知道我可能有点笨，但Jquery对我来说是新的。谢谢。做得好，使用类，当前单选按钮的值而且似乎非常有效。（+对于改进的HTML版本）感谢David的帮助-我已经看到它在JS Fiddle演示中工作，但似乎仍然无法工作。我仍然在使用p.hidded{display:none；}这是CSS-对吗？我在你的演示中注意到没有CSS，所以这仍然是造成我问题的原因吗？谢谢David，但由于某些原因，这仍然对我不起作用-我不知道为什么！！我仍然使用与上面代码中相同的CSS-这可能是个问题吗？我可以看到你的JS Fiddle演示中没有CSS对于我来说，任何关于这方面的进一步建议都是非常好的。谢谢你为什么不在你自己的演示中告诉我你在尝试什么？我在演示中省略的一件事是包装上面的jQuery:

$（document）.ready（function（）{/*代码位于这些花括号之间*/}）；

否则，你的浏览器JavaScript控制台中有错误吗（通常在浏览器中按ctrl+shift+i或F12）。

$('div.question input[type="radio"].question-type-yesno').on('change click', function (e) {
    var self = $(this),
        isChecked = self.is(':checked'),
        val = self.val();
    self.siblings('p.show-confirm-answer').toggleClass('hidden', isChecked && val === 'No'); // applied class if "No" is checked, otherwise removes the "hidden" class.
});