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:
- use change event instead of click event radio button.
- 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
Post a Comment