javascript - How to hide divs when radio button is checked on page load? -


i have existing jquery code hides divs if radio button selected. however, when page loads.. if radio button checked, want able hide divs without clicking anything.

<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 form:

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

i've been trying hours , doesn't seem work. appreciated!! thank you!

 document.addeventlistener("domcontentloaded", function(event) { // check after dom ready         if($('#residentno').is(':checked')){  // check if residentno 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

note: in example have set residentno checked demo it


Comments

Popular posts from this blog

c++ - llvm function pass ReplaceInstWithInst malloc -

Cross-Compiling Linux Kernel for Raspberry Pi - ${CCPREFIX}gcc -v does not work -

java.lang.NoClassDefFoundError When Creating New Android Project -