Question

我在表单上有几组单选按钮 - 它们都需要独立（成对）。当选择一个名为“时间”的集合时，我需要“是”来显示<p>而不是隐藏它。我已经使用CSS将<p>设置为隐藏，并且以下代码适用于1组单选按钮，但是当我开始添加其他按钮时，我不希望在第一组上选择“是”以显示所有{{1跨越来自（区分<p>我会称他们为<p>，<p1>等...

如何选择以下脚本中的单选按钮以仅影响

，并选择“时间”单选按钮。

<p2>

HTML是：

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

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

更新 * *

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

进一步更新**

 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>

HTML

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

CSS

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

Vulnerability:
<input type="radio" name="vulnerabille" value="Yes">Yes
<input type="radio" name="vulnerable" value="No">No<br>
<p class="vulnerability">What is the vulnerability:</h1><br>

我已经更新了代码，因此您可以更好地了解我要做的事情。

当我在任一组单选按钮上单击是时，它们对<style> p.hidden {display:none;} h1.hidden {display:none;} </style>个部分都有相同的影响。我只希望单选按钮能够直接影响它下面的<p>。

Answer 1

使用写入的HTML的一种方法如下：

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

JS Fiddle demo

略微改进的HTML，因为它允许用户点击标记元素的文本，因为该文本（以及input都包含在label中} element）如下：

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

适用于jQuery：

$('input[type="radio"]').change(function () {
    $(this).closest('div.question').find('p.hidden').toggle(this.value == 'Yes');
}).change();

JS Fiddle demo

参考文献：

Attribute-equals ([attribute="value"]) selector。
change()。
closest()。
find()。
first()。
nextAll()。
toggle()。

Answer 2

您可以使用以下代码。

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

Answer 3

jQuery的:eq(index)选择器将匹配的元素向下过滤到集合中指定的[从零开始]索引处的元素。给定您的标记，:eq(index)选择器匹配以下内容：

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>

确保每个单选按钮显示/隐藏正确的p元素的一个[不推荐]解决方案是使用CSS类来区分每个p和{{1}元素。这是一个例子：

<强> HTML

input[type="radio"]

<强>的JavaScript

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>

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

另一个解决方案，我建议的是改变你的标记，使其更抽象，这将允许更通用的处理程序。

修改HTML

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

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

抽象JavaScript

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

最后，对于不涉及更改标记且是抽象的解决方案，请使用David Thomas（+1，David）提供的[漂亮，优雅]解决方案。如果您的标记的其余部分与您已经发布的内容一致，那么他的解决方案将非常有效。

Answer 4

你可以简单地使用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>

你必须在css中使用相同的选择器来隐藏集合

.set1 {display:none}

命名单选按钮以隐藏/显示

4 个答案: