jquery隐藏并显示选择单选按钮时的DIV

我有一个小的脚本，应该在选中单选按钮时显示div。jquery隐藏并显示选择单选按钮时的DIV

在页面加载的是隐藏的股利，这就是工作，但是当我选择单选按钮“CheckboxGroup1_0”的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;?>"/>

谢谢你的时间和帮助。

来源

2016-03-17 DCJones

裹在单选按钮的'change'处理程序的代码。 – Tushar

可以使用change事件：

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

当单选按钮被选中它触发事件这样。请记住，这只是火灾时，该单选按钮被选中，所以要一个类似的活动适用于其他单选按钮，可以切换显示/隐藏

更新：如图莎尔在评论中指出，使用Ids可能是一个糟糕的主意，因为你最终会得到很多代码。我的建议是使用类来代替。

给你要显示或隐藏类即：.toggleShow

现在你的代码变得有很多清洁的输入：

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

来源

2016-03-17 04:28:54 JanR

'$（ “＃HideDateFromLabel，#HideDateToLabel，#HideDateFrom，#HideDateTo”）显示（）;'和'.trigger（ '变化'）'在网页加载执行的处理程序。 – Tushar

当'$（“＃CheckboxGroup1_0”）'被选中时，OP想隐藏条件元素。 – Tushar

@Tushar if（$（“＃CheckboxGroup1_0”）。attr（'checked'））{'他显示元素，这是相反的方式。 – JanR

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

来源

2016-03-17 04:48:17

看着你的代码我想你需要在选择其他无线电输入时隐藏这些字段。这里是我的版本：

$(document).ready(function(){ 
    var ids = "#HideDateFromLabel, #HideDateToLabel, #HideDateFrom, #HideDateTo"; 

    $(ids).hide(); 

    $('[name="waterall"]').on('change', function(){ 
     if($(this).is(':checked') && $(this).attr('id') == 'CheckboxGroup1_0') { 
      $(ids).show(); 
     } 
     else{ 
       $(ids).hide(); 
     } 
    }); 

});

这里是演示：https://jsfiddle.net/Smartik/kasb1bwj/

来源

2016-03-17 05:33:12

jquery隐藏并显示选择单选按钮时的DIV

回答

相关问题