Question

我试图在点击一个单选按钮时显示一个隐藏的文本字段。

我是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();
    });

Answer 1

这样做： -

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

LIVE DEMO

Answer 2

只更改两个单选按钮的ID两个具有相同ID的单选按钮无效....

html for you

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

Answer 3

请参见此处：演示 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();


    });
});

Answer 4

您的代码有一些错误：

将具有相同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();
    }
});

显示隐藏字段取决于单选按钮

4 个答案:

LIVE DEMO