html 根据单选按钮显示隐藏Div单击

Posted 2021-05-11

http://jsfiddle.net/PhFNm/1/



<form id='form-id'>
    <input id='watch-me' name='test' type='radio' value="a" /> SHOW OPTION 1
    <br />
    <input name='test' type='radio' value="b" /> SHOW OPTION 2
    <br />
    <input name='test' type='radio' value="c" />
</form>


<div id='show-me' style='display:none'>OPTION 1 </div>

<div id='show-me2' style='display:none'>OPTION 2</div>






<script>
$(document).ready(function(){
	
  $("input[name='test']").click(function () {
      $('#show-me').fadeIn("slow").css('display', ($(this).val() === 'a') ? 'block':'none');
      $('#show-me2').fadeIn("slow").css('display', ($(this).val() === 'b') ? 'block':'none');
  });

});
</script>