选择单选按钮时显示div

Question

我是javascript和jQuery的新手。在我的html中有两个单选按钮和一个div。我想要显示这个div，如果我检查第一个单选按钮，但否则我希望它是隐藏的。

所以:如果选中单选按钮#watch-me -> div # visible是可见的。如果单选按钮#watch-me未选中(既未选中，也未选中第二个)-> div # 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>

和联合来文：

 $(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();}
    });
});

我应该如何改变我的脚本以实现这一点？

Answer 1

我会这样处理：

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

       else {
            $('#show-me').hide();   
       }
   });
});

Answer 2

输入元素应该具有值属性。添加它们并使用如下：

$("input[name='test']").click(function () {
    $('#show-me').css('display', ($(this).val() === 'a') ? 'block':'none');
});

jsFiddle example

Answer 3

$('input[name=test]').click(function () {
    if (this.id == "watch-me") {
        $("#show-me").show('slow');
    } else {
        $("#show-me").hide('slow');
    }
});

http://jsfiddle.net/2SsAk/2/