0

フォームにいくつかのラジオ ボタンのセットがあります。それらはすべて独立している必要があります (ペアで)。「時間」というセットが選択されている場合、表示するには「はい」、<p>非表示のままにするには「いいえ」が必要です。CSS を使用して非表示に設定<p>しましたが、以下のコードはラジオ ボタンの 1 つのセットで機能しますが、他のラジオ ボタンを追加し始めるときに、この最初のセットで [はい] を選択してすべてを表示したくありません<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 をそのままの状態で操作するための 1 つの方法は次のとおりです。

$('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 に答える