2016-01-16 88 views
0

我有一個現有的jQuery代碼,如果單選按鈕被選中,它將隱藏div。但是,當頁面加載..如果這個單選按鈕已被選中,我希望能夠隱藏div而不點擊任何內容。如何在頁面加載時檢查單選按鈕時隱藏div?

<script> 
    $('input[name=resident]').click(function() { 
      if (this.id == "residentNo") { 
       $(".d").hide('slow'); 
       $('.d').find('#precinctNum').val(''); 
       $('.d').find('#yearStartedLiving').val('');     
      } else { 
       $(".d").show('slow'); 
       $('.d').find('#precinctNum').val(''); 
       $('.d').find('#yearStartedLiving').val(''); 
      } 
     });  
</script> 

HTML表單:

<label class="radio-inline"><input type="radio" class = "res" id = "residentYes" name="resident" value="Yes" checked> Yes</label> 
<label class="radio-inline"><input type="radio" class = "res" id = "residentNo" name="resident" value="No" > No</label> 

<div class="d item form-group" > 
    <label class="control-label col-md-3 col-sm-3 col-xs-12" for="name">Precinct Number <span class="required">*</span> 
    </label> 
<div class="col-md-6 col-sm-6 col-xs-12"> 
    <input id="precinctNum" class="form-control col-md-5 col-xs-12" name="precinctNum" data-validate-length-range="7" required="required" type="number"> 
</div> 
</div> 

<div class="d item form-group"> 
    <label class="control-label col-md-3 col-sm-3 col-xs-12" for="name">Start of Residency (Year) <span class="required">*</span> 
    </label> 
<div class="col-md-6 col-sm-6 col-xs-12"> 
    <input type="text" id="yearStartedLiving" name="yearStartedLiving" class="form-control col-md-5 col-xs-12" required="required" data-inputmask="'mask': '9999'"> 
</div> 
</div> 

我一直在嘗試了幾個小時,它似乎並沒有工作。您的幫助將非常感謝!謝謝!

回答

1
document.addEventListener("DOMContentLoaded", function(event) { // Will check after DOM is ready 
     if($('#residentNo').is(':checked')){ // Check if residentNo is checked 
     toggleDiv("residentNo") 
     } 
     }); 


    $('input[name=resident]').click(function() { 
    toggleDiv(this.id) 

    }) 

    function toggleDiv(id){ 
       if (id == "residentNo") { 
        $(".d").hide('slow'); 
$(".d").find('#precinctNum, #yearStartedLiving, #birthplace, #weight, #height, #income').val(''); 

       } else { 
        $(".d").show('slow'); 
$(".d").find('#precinctNum, #yearStartedLiving, #birthplace, #weight, #height, #income').val(''); 

       } 
      }; 

JSFIDDLE

注意:在這個例子中,我已經設置residentNochecked演示它

+0

這爲我工作!非常感謝!!最後,我的問題解決了,謝謝你!我的隊友也表示感謝。 –

+0

@WandaMaximoff請考慮接受它作爲回答 – brk

+0

完成。謝謝!!! –

1

你可以像下面。只需在$(document).ready中添加代碼即可。希望能幫助到你。

if($('#residentNo').is(':checked')){ 
 
    $(".d").hide(); 
 
    $('.d').find('#precinctNum, #yearStartedLiving').val(''); 
 
} 
 

 
$('input[name=resident]').click(function() { 
 
    if (this.id == "residentNo") { 
 
     $(".d").hide('slow'); 
 
     $('.d').find('#precinctNum, #yearStartedLiving').val('');    
 
    } else { 
 
     $(".d").show('slow'); 
 
     $('.d').find('#precinctNum, #yearStartedLiving').val(''); 
 
    } 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<label class="radio-inline"><input type="radio" class = "res" id = "residentYes" name="resident" value="Yes" checked> Yes</label> 
 
<label class="radio-inline"><input type="radio" class = "res" id = "residentNo" name="resident" value="No" > No</label> 
 

 
<div class="d item form-group" > 
 
    <label class="control-label col-md-3 col-sm-3 col-xs-12" for="name">Precinct Number <span class="required">*</span> 
 
    </label> 
 
<div class="col-md-6 col-sm-6 col-xs-12"> 
 
    <input id="precinctNum" class="form-control col-md-5 col-xs-12" name="precinctNum" data-validate-length-range="7" required="required" type="number"> 
 
</div> 
 
</div> 
 

 
<div class="d item form-group"> 
 
    <label class="control-label col-md-3 col-sm-3 col-xs-12" for="name">Start of Residency (Year) <span class="required">*</span> 
 
    </label> 
 
<div class="col-md-6 col-sm-6 col-xs-12"> 
 
    <input type="text" id="yearStartedLiving" name="yearStartedLiving" class="form-control col-md-5 col-xs-12" required="required" data-inputmask="'mask': '9999'"> 
 
</div> 
 
</div>

+0

我覺得代碼可以縮短到 '$(」 d ')。找到(' #precinctNum,#yearStartedLiving,#birthplace,#weight,#height,#收入')。val('');' – mylee

+0

感謝您的建議。我已經更新了我的答案。 @mylee – Azim

+0

它沒有工作,但我確實縮短了我的代碼感謝您的建議。我不知道這是可能的!再次感謝你。 –

1

您可以觸發事件點擊你感興趣的領域:

 
$('input[name=resident][value="No"]').trigger('click'); 

$(function() { 
 
    $('input[name=resident]').click(function() { 
 
    if (this.id == "residentNo") { 
 
     $(".d").hide('slow'); 
 
    } else { 
 
     $(".d").show('slow'); 
 
    } 
 
    $('.d').find('#precinctNum, #yearStartedLiving').val(''); 
 
    }); 
 
    
 
    
 
    $('input[name=resident][value="No"]').trigger('click'); 
 
});
<script src="http://code.jquery.com/jquery-1.11.3.js"></script> 
 

 

 
<label class="radio-inline"><input type="radio" class = "res" id = "residentYes" name="resident" value="Yes" checked> Yes</label> 
 
<label class="radio-inline"><input type="radio" class = "res" id = "residentNo" name="resident" value="No" > No</label> 
 

 
<div class="d item form-group" > 
 
    <label class="control-label col-md-3 col-sm-3 col-xs-12" for="name">Precinct Number <span class="required">*</span> 
 
    </label> 
 
    <div class="col-md-6 col-sm-6 col-xs-12"> 
 
     <input id="precinctNum" class="form-control col-md-5 col-xs-12" name="precinctNum" data-validate-length-range="7" required="required" type="number"> 
 
    </div> 
 
</div> 
 

 
<div class="d item form-group"> 
 
    <label class="control-label col-md-3 col-sm-3 col-xs-12" for="name">Start of Residency (Year) <span class="required">*</span> 
 
    </label> 
 
    <div class="col-md-6 col-sm-6 col-xs-12"> 
 
     <input type="text" id="yearStartedLiving" name="yearStartedLiving" class="form-control col-md-5 col-xs-12" required="required" data-inputmask="'mask': '9999'"> 
 
    </div> 
 
</div>

+0

非常感謝您的回答!我已經解決了這個問題,但是謝謝你。這將作爲我和其他人的未來參考。謝謝!!! –

+0

非常友善。非常感謝 – gaetanoM

相關問題