2

ラジオボタンがクリックされたときに非表示のテキストフィールドを表示しようとしています。

私はjQueryを初めて使用し、コードのさまざまな例とチュートリアルを見てきましたが、それらはすべてjQueryのリリースごとにわずかに異なり、どのコードが新しいか、どちらが古いかについて混乱しています。変更を提案する人もいれば、クリックする人もいます（これは私にはもっと理にかなっていますが、おそらく完全に間違っています）。

これが私のコードのセクションです：

まず、フォーム：

Are you eighteen or above?<br/>
<input type="radio" id="age" name="age" value="yes"/>Yes<br/>
<input type="radio" id="age" name="age" value="no"/>No<br/><br/>

<!-- if no is selected the below text form shall appear -->     
<div id="agetext">
    If no, please tell us your date of birth:<br/>
    <textarea id="age" name="agetext" rows="5" cols="40"></textarea><br/><br/>
</div>

次に、スクリプト（headタグにあります）：

$(document).ready(function() 
{
    $("#agetext").hide();
    $("#agetextgo").click(function() 
    {
        if ( $('input[name="age"]:checked').val() == "no")
        {
            $("#agetext").show();
        }
        else ( $('input[name="age"]:checked').click() == "yes")
            $("#agetext").hide();
    });
4

4 に答える 4

4

これを行う：-

$("#agetext").hide();
$("input[name=age]").click(function() 
    {
        if ( $("#age1").attr('checked'))
            $("#agetext").hide();
        else
            $("#agetext").show();
    });

ライブデモ

于 2012-04-21T11:35:03.967 に答える
1

こちらをご覧ください：デモ http://jsfiddle.net/Yu7fN/6/

私が解決した構文上の問題が複数ありますが、それでも改善できます。乾杯！（お役に立てれば）

jqueryコード 

$(function() {

    $("#agetext").hide();

    $(".age").click(function() {
        alert($('input[name="age"]:checked').val());
        if ($('input[name="age"]:checked').val() == "no")
            $("#agetext").show();
        else if ($('input[name="age"]:checked').val() == "yes") 
            $("#agetext").hide();


    });
});​
于 2012-04-21T11:36:46.553 に答える
1

あなたのコードにはいくつかの間違いがあります：

  • 同じID（入力ラジオ）を持つ複数のHTML要素、これは無効です、
  • "#agetextgoページに存在しない要素を使用しています
  • $('input[name="age"]:checked').click() == "yes"正しくありませんclick、文字列値と等しくできませんでした

jsfiddleで作業デモを行いました。http：//jsfiddle.net/pomeh/5DuQB/1/をご覧ください。

デモで使用されるコードは

<form>
Are you eighteen or above?<br/>
    <input type="radio" name="age" value="yes"/>Yes<br/>
    <input type="radio" name="age" value="no"/>No<br/><br/>
    <div id="agetext">
        If no, please tell us your date of birth:<br/>
        <textarea id="age" name="agetext" rows="5" cols="40"></textarea><br/><br/>
     </div>
</form>

と

var $div = jQuery("#agetext");

// hidden by default
$div.hide();

// when a click occur on an input[type=radio] element
jQuery("form").on("click", "input[type=radio]", function() {
    // does the element clicked has the value "yes" ?
    if ($(this).val()==="yes") {
        $div.hide();
    }
    else {
        $div.show();
    }
});​
于 2012-04-21T11:40:03.593 に答える
1

2つのラジオボタンのIDを変更するだけです。同じIDの2つのラジオボタンは無効です。

あなたのためのhtml

<input type="radio" id="age1" name="age" value="yes"/>Yes<br/>
<input type="radio" id="age2" name="age" value="no"/>No<br/><br/>

これがこのためのjqueryです

$("#age1").click(function() 
    {
        if ( $("#age1").attr('checked'))
            $("#agetext").show();
    });

   $("#age2").click(function() 
    {
        if ( $("#age2").attr('checked'))
            $("#agetext").hide();
    });
于 2012-04-21T11:23:22.090 に答える