1

以下の私のコードでは、「はい」とマークされたラジオボタンを選択すると、スライドダウンします。しかし、「いいえ」とマークされたものをクリックしても、上にスライドしません。どうしてこれなの？

html:

<label>Yes</label><input type="radio" name="teacher" id="teacher" value="yes"/>
<label>No</label><input type="radio" name="teacher" id="teacher" value="no"/><br>

jquery:

$("#teacher").click(function() {    
    if($(this).val() === "yes")
    {
        $("#teacher-info").slideDown();
    }
    else if($(this).val() === "no")
    {
        $("#teacher-info").slideUp();
    }
});
4

2 に答える 2

2

の を持つ 2 つの要素がidありteacherます。

idは一意のプロパティであることを意図しており (1 つの要素のみが 1 つの特定の を持ちますid)、jQuery はそれが true であると想定します。同じ を持つ 2 つの要素がある場合id、jQuery は常に最初の要素を選択します。

そうは言っても、問題の解決策は、 を に変更するidことclassです。これは、多くの要素に使用するように設計されています。

HTML :

<label>Yes</label>
<input type="radio" name="teacher" class="teacher" value="yes"/>

<label>No</label>
<input type="radio" name="teacher" class="teacher" value="no"/>

JavaScript :

$(".teacher").click(function() {    
    if($(this).val() === "yes")
    {
        $("#teacher-info").slideDown();
    }
    else if($(this).val() === "no")
    {
        $("#teacher-info").slideUp();
    }
});

ところで、ラジオ ボタンには 2 つの状態 (yesとno) しかないため、コードを簡略化できます。

$(".teacher").click(function() {    
    if ($(this).val() === "yes") {
        $("#teacher-info").slideDown();
    } else {
        $("#teacher-info").slideUp();
    }
});
于 2012-06-03T05:40:21.127 に答える
0

Jquery で値を取得radiobuttonするには、次のようにします。

$('input:radio[name=teacher]:checked').val();

まず、コードを変更して次を追加しますclass。

<label>Yes</label>
<input type="radio" name="teacher" class="teacher" value="yes"/>

<label>No</label>
<input type="radio" name="teacher" class="teacher" value="no"/>

したがって、コードを次のように変更します。

$(".teacher").click(function() {  
    var btnValue = $('input:radio[name=teacher]:checked').val()
    if(btnValue === "yes")
    {
        $("#teacher-info").slideDown();
    }
    else if(btnValue === "no")
    {
        $("#teacher-info").slideUp();
    }
});
于 2012-06-03T05:45:42.087 に答える