Question

我试图隐藏和取消隐藏基于选项按钮选择的输入控件。它只在我选择选项按钮时工作正常，但我需要在加载页面时，所有输入控制按钮都必须隐藏，并且根据选择只需要显示相应的输入控件。

这是我的HTML代码：

<div id="Radio" class="leaf">
    <fieldset class="control select multiple" title="">
        <legend>Select Input Criteria</legend>
        <ul class="list inputSet sizable">                <li>
                <div class="control radio">
                    <input checked="checked" class="" id="Radio1" type="radio" name="Radio_option" value="~NOTHING~">
                    <label class="wrap" for="Radio1" title="">
                        ---&nbsp;
                    </label>
                </div>
            </li>
                            <li>
                <div class="control radio">
                    <input class="" id="Radio2" type="radio" name="Radio_option" value="Enter by Account Number">
                    <label class="wrap" for="Radio2" title="">
                        Enter by Account Number&nbsp;
                    </label>
                </div>
            </li>
                            <li>
                <div class="control radio">
                    <input class="" id="Radio3" type="radio" name="Radio_option" value="2">
                    <label class="wrap" for="Radio3" title="">
                        Enter by Branch/Product/Account Number&nbsp;
                    </label>
                </div>
            </li>
            &nbsp;</ul>
    </fieldset>
    <span class="warning"></span>
    <div class="resizeOverlay hidden"></div>
    <div class="sizer vertical" style="position: relative;"><span class="ui-icon ui-icon-grip-solid-horizontal"></span></div>
</div>
<div id="Date" class="leaf">
    <label class="control picker" title="Select Date. 
If your parameter supports relative date expressions, you can enter expressions like 'WEEK+1' in this input control">
        <span class="wrap">Select Date</span>
        <input class="date hasDatepicker" type="text" value="~NULL~" id="dp1399014987627">&nbsp;<span class="button picker calTriggerWrapper"><button type="button" class="ui-datepicker-trigger"></button></span>
        <div class="warning"></div>
    </label>
</div>
<div id="Account" class="leaf">
    <label class="control input text" title="">
        <span class="wrap">Select Account Number</span>
        <input class="" type="text" value="[Null]">
        <span class="warning"></span>
    </label>
</div>
<div id="Date1" class="leaf" style="display: none;">
    <label class="control picker" title="Select Date. 
If your parameter supports relative date expressions, you can enter expressions like 'WEEK+1' in this input control">
        <span class="wrap">Select Date</span>
        <input class="date hasDatepicker" type="text" value="~NULL~" id="dp1399014987628">&nbsp;<span class="button picker calTriggerWrapper"><button type="button" class="ui-datepicker-trigger"></button></span>
        <div class="warning"></div>
    </label>
</div>

我的验证是使用脚本标记中的jQuery编写的，如下所示：

jQuery(document).ready(function () {

jQuery(document).on('change',':radio[name="Radio_option"]',function(event){
    var radiovalue=jQuery(':radio[name="Radio_option"]:checked').val();
        alert(radiovalue);

    if(radiovalue=="~NOTHING~")
    {
        jQuery( "#Date" ).datepicker( "destroy" );
        jQuery( "#Date" ).hide();
        jQuery("#Account").hide();
        jQuery( "#Date1" ).datepicker( "destroy" );
        jQuery("#Date1").hide(); 

    }       

    if(radiovalue =="Enter by Account Number")
    {
        jQuery("#Date").show();
        jQuery("#Account").show();
        jQuery( "#Date1" ).datepicker( "destroy" );
        jQuery("#Date1").hide(); 

        return false;
    }

    if(radiovalue =="2"){
        jQuery( "#Date" ).datepicker( "destroy" );
        jQuery( "#Date" ).hide();
        jQuery("#Account").hide();
        jQuery("#Date1").show();

        return false;
    }

});
});

请建议我一些代码，我可以隐藏所有字段日期，帐户，日期1加载页面。

先谢谢。

Answer 1

在准备好文档时，您需要隐藏元素。

jQuery(document).ready(function(){
   jQuery( "#Date" ).hide();
   jQuery( "#Date" ).hide();
   jQuery("#Account").hide();
   jQuery("#Date1").hide();
});

编辑： demo

Answer 2

另一个解决方案是你可以为你的输入安排一个课程。这样你就不会花太多钱来写其他输入，例如textarea。

HTML：

<form>
    <input class="form-input-hide" type="text" >
    <textarea class="form-input-hide"></textarea>
</form>
<!-- and so on -->

然后隐藏它们。

jQuery的：

$('.form-input-hide').hide();

Answer 3

jQuery(document).ready(function () {
    jQuery("#Date").hide();
    jQuery("#Account").hide();
    jQuery("#Date1").hide(); 
    // other elements to hide 
jQuery(document).on('change',':radio[name="Radio_option"]',function(event){
var radiovalue=jQuery(':radio[name="Radio_option"]:checked').val();
    alert(radiovalue);

if(radiovalue=="~NOTHING~")
{
    jQuery( "#Date" ).datepicker( "destroy" );
    jQuery( "#Date" ).hide();
    jQuery("#Account").hide();
    jQuery( "#Date1" ).datepicker( "destroy" );
    jQuery("#Date1").hide(); 

}       

if(radiovalue =="Enter by Account Number")
{
    jQuery("#Date").show();
    jQuery("#Account").show();
    jQuery( "#Date1" ).datepicker( "destroy" );
    jQuery("#Date1").hide(); 

    return false;
}

if(radiovalue =="2"){
    jQuery( "#Date" ).datepicker( "destroy" );
    jQuery( "#Date" ).hide();
    jQuery("#Account").hide();
    jQuery("#Date1").show();

    return false;
}

替代

为ID帐户和日期1

的div添加style = display：none

Answer 4

只需给他们所有相同的课程（在此示例中为ThingsToHide，然后您可以将其隐藏起来：

HTML：

<input class="ThingsToHide" id="Radio2" type="radio" name="Radio_option" value="Enter by Account Number">

jQuery的：

$('.ThingsToHide').hide();

当页面自动加载时，页面中的所有输入控件都应该使用jQuery隐藏

4 个答案: