javascript - Show div if radio value selected -
i show div
if radio value selected hide again if different value selected
<input type="radio" name="timespan" id="timespan" value="ongoing" checked>on-going <input type="radio" name="timespan" id="timespan" value="history">historical <script type="text/javascript"> $(document).ready(function() { $('.end_date').css('display','none'); $('#timespan').click(function () { var selected = $(this).find(':checked').val(); if(selected == 'history') { $('.end_date').css('display','block'); } else { $('.end_date').css('display','none'); } }); }); </script>
if history
selected want elements class end_date
show, otherwise if ongoing
selected them hidden
html markup should not include 2 elements same id
, id
on page should unique, instead add class
timespan both radio buttons.
in code .hide()
, .show()
can used in place of setting display
property block or none.
also instead of finding checked
radio button, can assume clicked button checked. simplifies code $(this).val();
instead of $(this).find(':checked').val();
html
<input type="radio" class="timespan" name="timespan" value="ongoing" checked>on-going <input type="radio" class="timespan" name="timespan" value="history">historical <div class="end_date">end date</div>
javascript
$(document).ready(function() { $('.end_date').hide(); $('.timespan').click(function () { var selected = $(this).val(); if(selected == 'history') { $('.end_date').show(); } else { $('.end_date').hide(); } }); });
js fiddle: http://jsfiddle.net/hd4ey/
Comments
Post a Comment