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"不正确，aclick不能等于字符串值

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

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

给你的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 回答