Question

我有一个小脚本，在选择单选按钮时应显示div。

在页面加载时，Div被隐藏，这是有效的，但是当我选择单选按钮＆＃34; CheckboxGroup1_0＆＃34; Div没有显示。任何人都可以看到我出错的地方。

我的代码;

$(document).ready(function(){ 
    $("#HideDateFromLabel").hide();
    $("#HideDateToLabel").hide();
    $("#HideDateFrom").hide();
    $("#HideDateTo").hide();

    if ( $("#CheckboxGroup1_0").attr('checked')){
        $("#HideDateFromLabel").show();
        $("#HideDateToLabel").show();
        $("#HideDateFrom").show();
        $("#HideDateTo").show();
    }

});

<input name="waterall" type="radio" id="CheckboxGroup1_0" value="0">     
<input name="waterall" type="radio" id="CheckboxGroup1_1"  value="1">
<input name="waterall" type="radio" id="CheckboxGroup1_2"  value="2">

<input name="FromDate" type="text" class="imaindatesel" id="HideDateFrom"  onclick= "scwShow (scwID('FromDate'), event);" value="<? print $FromDateTemp;?>" />

<input name="ToDate" type="text" class="imaindatesel" id="HideDateTo"  onclick= "scwShow (scwID('ToDate'), event);" value="<? print $ToDateTemp;?>"/>

感谢您的时间和帮助。

Answer 1

我让div出现了。

<script>
    $(document).ready(function(){ 
    $("#HideDateFromLabel").hide();
    $("#HideDateToLabel").hide();
    $("#HideDateFrom").hide();
    $("#HideDateTo").hide();

    $("#CheckboxGroup1_0").change(function(){
        if (this.checked) {
             $("#HideDateFromLabel").show();
       $("#HideDateToLabel").show();
       $("#HideDateFrom").show();
       $("#HideDateTo").show();
        }
    });

    // if ( $("#CheckboxGroup1_0").attr('checked')){
    //     $("#HideDateFromLabel").show();
    //     $("#HideDateToLabel").show();
    //     $("#HideDateFrom").show();
    //     $("#HideDateTo").show();
    // }

});
</script>

Answer 2

您可以使用change事件：

$("#CheckboxGroup1_0").on('change', function(){
        $("#HideDateFromLabel").show();
        $("#HideDateToLabel").show();
        $("#HideDateFrom").show();
        $("#HideDateTo").show();
});

这样，当选中单选按钮时，它会触发事件。请记住，这仅在选中radiobutton时触发，因此您希望将类似事件应用于其他单选按钮以便能够切换显示/隐藏

更新：正如Tushar在评论中指出的那样，使用ID可能是一个坏主意，因为你最终会得到很多代码。我的建议是改用类。

提供您想要显示或隐藏类的输入，即：.toggleShow

现在你的代码变得更清晰了：

$("#CheckboxGroup1_0").on('change', function(){
        $(".toggleShow").show();
});

Answer 3

查看您的代码我认为您需要在选择其他无线电输入时隐藏字段。这是我的版本：

runGPS()

以下是演示：https://jsfiddle.net/Smartik/kasb1bwj/

选中单选按钮时，Jquery隐藏并显示DIV

3 个答案: