javascript - Hide different divs with different ratio checked -


got code in following question hi! how can transform code "universal". work 1 case. if have 2 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 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 membership number</label>          <input id="membernumber" name="membernumber" class="inputfield" type="text">        </div>      </div>    </fieldset>  </div>

you have set common class , dom traversal respect selected radio button.


things noted:

  1. use change event instead of click event radio button.
  2. use value detect radio button instead of sniffing 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 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 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 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 membership number</label>          <input id="membernumber" name="membernumber" class="inputfield" type="text">        </div>      </div>    </fieldset>  </div>


Comments

Popular posts from this blog

jOOQ update returning clause with Oracle -

java - Warning equals/hashCode on @Data annotation lombok with inheritance -

java - BasicPathUsageException: Cannot join to attribute of basic type -