CODEWITHSUNDEEP
javascriptjqueryhtmlcssradio-button
Isabella
Isabella

Reputation: 455

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

I have an existing jquery code where it hides divs if the radio button is selected. However, when the page loads.. if this radio button is already checked, I want to be able to 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 for hours and it doesn't seem to work. Your help will be much appreciated!! Thank you!

Upvotes: 0

Views: 368

Answers (3)

Ibrahim Khan
Ibrahim Khan

Reputation: 20740

You can do it like below. Just add the code in $(document).ready. Hope it helps.

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>

Upvotes: 1

brk
brk

Reputation: 50291

 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

NOTE: In this example I have set residentNo to checked to demo it

Upvotes: 1

gaetanoM
gaetanoM

Reputation: 42044

You can trigger the event click on field of your interest:

$('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>

Upvotes: 1

Related Questions