选择单选按钮时显示 div

2022-01-21 00:00:00 radio-button jquery javascript html css

我是 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

so: 如果选中单选按钮#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();   
       }
   });
});

相关文章