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(''); } };
note: in example have set residentno
checked
demo it
Comments
Post a Comment