0

我在一个表单上有几组单选按钮 - 它们都需要独立（成对）。When a set called "time" are selected I need 'Yes' to show <p>and no to leave it hidden. 我已经<p>使用 CSS 设置为隐藏，下面的代码适用于一组单选按钮，但是当我开始添加其他单选按钮时，我不想在第一组中选择“是”以显示所有<p>来自（为了区分<p>我会打电话给他们<p1>，<p2>等等...

如何在以下脚本中命名单选按钮以仅影响

与“时间”单选按钮被选中。

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

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

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>

更新* *

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

进一步更新**

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

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

CSS

<style>
p.hidden {display:none;}
h1.hidden {display:none;}
</style>

我已经更新了代码，以便您更好地了解我想要做什么。

当我在任一组单选按钮上单击“是”时，它们对这两个<p>部分都有相同的影响。我只希望单选按钮影响<p>它的正下方。

4

4 回答 4

2

一种处理您编写的 HTML 的方法如下：

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

JS 小提琴演示。

稍微改进的 HTML，因为它允许用户单击标记元素的文本，因为该文本（并且input都包含在一个label元素中）如下：

<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 小提琴演示。

参考：

于 2013-09-04T20:26:25.847 回答
0

您为此使用以下代码。

<script>
$(document).ready(function(){
    $("input[type=radio]").click(function(){
      if($(this).attr('value') == 'Yes')
         $("p").show();
      else
         $("p").hide();
    });
});
</script>
于 2013-09-04T20:51:34.573 回答
0

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元素input[type="radio"]。这是一个例子：

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>

JavaScript

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

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

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

另一种解决方案，我推荐的解决方案是更改您的标记以使其更抽象，这将允许更通用的处理程序。

修改后的 HTML

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

抽象的 JavaScript

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

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

于 2013-09-04T21:02:41.613 回答
-1

你可以简单地使用 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}
于 2013-09-04T17:53:03.490 回答