当选择单选按钮时显示div

本文介绍了当选择单选按钮时显示div的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我是新手的javascript和jQuery。 在我的html有2个单选按钮和一个div。我想显示div如果我检查第一个单选按钮，否则我想隐藏

I am novice in javascript and jQuery. In my html have 2 radio buttons and one div. I want to show that div if I check the first radio-button but otherwise I want it to be hidden

所以：如果单选按钮＃watch-me被选中 - > div＃show-me是可见的。 如果单选按钮＃watch-me未选中（未选中或第二个被选中） - > div＃show-me已隐藏。

so: If radio button #watch-me is checked --> div #show-me is visible. If radio button #watch-me is unchecked (neither are checked or the second is checked) --> div #show-me is hidden.

是我到目前为止。

<form id='form-id'> <input id='watch-me' name='test' type='radio' /> Show Div<br /> <input name='test' type='radio' /><br /> <input name='test' type='radio' /> </form> <div id='show-me' style='display:none'>Hello</div>

和JS：

$(document).ready(function () { $("#watch-me").click(function() { $("#show-me:hidden").show('slow'); }); $("#watch-me").click(function(){ if($('watch-me').prop('checked')===false) { $('#show-me').hide();} }); });

我应该如何改变我的脚本来实现？

How should I change my script to achieve that?

推荐答案

我会这样处理：

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