0

所以我有一个基本的形式

<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:: Edit:: 稍微修改了代码，因为我意识到它做得比它需要的更多。

$(文档).ready(函数(){

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


});

它应该做的是，如果单击“其他”单选按钮，取消隐藏“其他城市”div 以允许表单输入，否则需要隐藏它。我不明白的是出了什么问题。我没有解决与浏览器相关的问题，只是代码本身的问题。任何帮助，将不胜感激。

4

5 回答 5

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/

于 2013-09-20T23:56:34.317 回答
1

您的 jQuery 选择器有点混乱。

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

if($("form_radio_other")也没有使用.or#来选择您要查找的内容。

于 2013-09-20T23:57:06.780 回答
1

您的 HTML ( ) 中没有name属性，<input type="radio" id="form_radio_other" value="Other">并且您的 JQuerycss函数无效。

像这样改变：

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

JSFiddle

于 2013-09-20T23:58:54.903 回答
1

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

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

于 2013-09-21T00:01:43.903 回答
0

这里有多个问题：

  • 单选按钮名称必须相同，才能将它们放在同一组中
  • 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");
    }
});

小提琴

于 2013-09-20T23:58:08.387 回答