Question

所以我有一个基本的表格

<div id="webForm_Contact">
    <form action="">
        <label for="form_fName"> Full name: </label>
        <input type="text" id="form_fName"><br />
        <label for="form_email" > Email: </label>
        <input type="text" id="form_email"><br />
        <label for="form_phone"> Phone </label>
        <input type="text" id="form_phone"><br />
        <label for=""> Location: </label>
        <label for="form_radio_london"> London</label>
        <input type="radio" id="form_radio_london" value="London">
        <label for="form_radio_Toronto"> Toronto</label>
        <input type="radio" id="form_radio_Toronto" value="Toronto">        
        <label for="form_radio_other"> Other</label>
        <input type="radio" id="form_radio_other" value="Other">

        <!-- radio select here-->

            <div id="otherCity">
                <label for="form_otherCity"> Other City </label> 
                <input type="text" id="form_otherCity">
            </div>
            <br />
        <input type="submit" value="Submit">

    </form>
</div>

和一个简单的jQuery :: 编辑::稍微改变了代码，因为我意识到它正在做更多，然后它需要它。

（文档）$。就绪（函数（）{

    if($("#form_radio_other").is(':checked') ){
        $("#otherCity").css("display:inline");
    }
    else{
        $("#otherCity").css("display:none");
    }   


});

它应该做的是，如果单击“其他”单选按钮，取消隐藏“otherCity”div以允许表单输入，否则需要隐藏它。我不理解的是什么是错的。我没有遇到与浏览器相关的问题，只是问题是它自己的代码问题。任何帮助将不胜感激。

Answer 1

将您的JavaScript更改为：

$(document).ready(function(){
    $("input:radio").change(function(){
        if($('#form_radio_other').is(':checked') ){
            $("#otherCity").css("display","inline");
        }
        else{
            $("#otherCity").css("display","none");
        }
    });
});

您还应该为所有无线电输入添加一个具有相同值的name属性，这样它们实际上就像单选按钮一样。

jsFiddle示例：http://jsfiddle.net/nWkhT/

Answer 2

你的jQuery选择器有点混乱。

例如：$('input:radio[name="form_radio_other"]').change...正在尝试选择名称为form_radio_other的广播，该广播不存在。它应该是$('#form_radio_other')。

if($("form_radio_other")未使用.或#来选择您要查找的内容。

Answer 3

您的HTML（name）中没有<input type="radio" id="form_radio_other" value="Other">属性，而您的JQuery css功能无效。

像这样改变：

$('#form_radio_other').change(function(){
    if($("#form_radio_other").is(':checked') ){
       $("#otherCity").css("display","inline");
    }
    else{
        $("#otherCity").css("display","none");
    }
});

JSFiddle

Answer 4

为了只选择一个单选按钮，您必须为每个单选按钮使用name属性

示例：<input type="radio" id="form_radio_london" value="London" name="myradiobuttongroup"/>

Answer 5

这里有多个问题：

单选按钮名称必须相同，才能将它们放在同一组
JQuery CSS功能类似于.css("attr", "value")，而不是.css("attr:value")

$('input:radio').change(function(){
    if($("#form_radio_other").is(':checked') ){
        $("#otherCity").css("display", "inline");
    }
    else{
        $("#otherCity").css("display", "none");
    }
});

Fiddle

简单的jQuery选择器

5 个答案: