groseler groseler - 4 months ago 9
Javascript Question

Hide different divs with different ratio checked

Got this code in the following question
Hi!
How can I transform this code to be "universal". For now it will only work for one case. If i have two it will not work.

Thank you



$(document).ready(function() {
$('input[type="radio"]').click(function() {
if($(this).attr('id') == 'watch-me') {
$('#show-me').show();
}
else {
$('#show-me').hide();
}
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="medium-12">
<label>Are you a member?</label>
</div>
<div class="medium-6">
<fieldset class="form-row" id="Member">
<input type="radio" id="watch-me" value="yes" name="Member" class="tap-input">
<label for="watch-me">Yes</label>
<input type="radio" id="MemberNo" value="no" name="Member" class="tap-input">
<label for="MemberNo">No</label>

<div id="show-me" class=" medium-12">
<div class="form-row">
<label for="memberNumber">Please enter your Membership number</label>
<input id="memberNumber" name="memberNumber" class="inputfield" type="text">
</div>
</div>
</fieldset>
</div>




Answer

You have to set a common class and do dom traversal with respect to the selected radio button.


Things to be noted:

  1. Use change event instead of click event for radio button.
  2. Use the value to detect the radio button instead of sniffing its id.

$(document).ready(function() {
   $('input[type="radio"]').change(function() {
      $(this).closest('fieldset').find('.show-me').toggle(this.value == "yes");           
   });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="medium-12">
  <label>Are you a member?</label>
</div>
<div class="medium-6">
  <fieldset class="form-row" id="Member">
    <input type="radio" id="watch-me"  value="yes" name="Member" class="tap-input">
    <label for="watch-me">Yes</label>
    <input type="radio" id="MemberNo" value="no" name="Member" class="tap-input">
    <label for="MemberNo">No</label>

    <div class="show-me" class=" medium-12">
      <div class="form-row">
        <label for="memberNumber">Please enter your Membership number</label>
        <input id="memberNumber" name="memberNumber" class="inputfield" type="text">
      </div>
    </div>
  </fieldset>
</div>

<div class="medium-6">
  <fieldset class="form-row" id="Member">
    <input type="radio" id="watch-me"  value="yes" name="Member" class="tap-input">
    <label for="watch-me">Yes</label>
    <input type="radio" id="MemberNo" value="no" name="Member" class="tap-input">
    <label for="MemberNo">No</label>

    <div class="show-me" class=" medium-12">
      <div class="form-row">
        <label for="memberNumber">Please enter your Membership number</label>
        <input id="memberNumber" name="memberNumber" class="inputfield" type="text">
      </div>
    </div>
  </fieldset>
</div>

<div class="medium-6">
  <fieldset class="form-row" id="Member">
    <input type="radio" id="watch-me"  value="yes" name="Member" class="tap-input">
    <label for="watch-me">Yes</label>
    <input type="radio" id="MemberNo" value="no" name="Member" class="tap-input">
    <label for="MemberNo">No</label>

    <div class="show-me" class=" medium-12">
      <div class="form-row">
        <label for="memberNumber">Please enter your Membership number</label>
        <input id="memberNumber" name="memberNumber" class="inputfield" type="text">
      </div>
    </div>
  </fieldset>
</div>