jQuery单选按钮显示div答案

【问题标题】：jQuery radio button show divjQuery单选按钮显示div
【发布时间】：2013-01-25 21:28:28
【问题描述】：

大家好，如果选中此单选按钮，我可以使用什么功能来显示此“div”。提前致谢。

【问题讨论】：

【解决方案1】：

HTML

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

jQuery

$('#form-id').change(function() {
    if ($('#watch-me').attr('checked')) {
        $('#show-me').show();
    } else {
        $('#show-me').hide();
    }
});

你可以在这里看到它的实际效果：http://jsfiddle.net/wmKGd/

25.01.2013 更新
从 jQuery Library 1.8.x 升级到 1.9.x 之后
请使用代替
jQuery 库 1.8.x

jQuery('#some-id').attr('checked')

jQuery 库 1.9.x

jQuery('#some-id').prop('checked')

您可以在此处查看更新的脚本：http://jsfiddle.net/9XXRY/

【讨论】：

谢谢，这对我也有帮助！也感谢 25.01.13 更新。

【解决方案2】：

我喜欢 @tinifni 的 jsfiddle。这是一个有 3 个 div 的 div，根据收音机显示或隐藏。

http://jsfiddle.net/dbwest/wmKGd/572/

$('#form-id').change(function() {
    if ($('#watch-me').attr('checked')) {
        $('#show-me').show();
    } else {
        $('#show-me').hide();
    }
    if ($('#watch-me2').attr('checked')) {
        $('#show-me2').show();
    } else {
        $('#show-me2').hide();
    }
    if ($('#watch-me3').attr('checked')) {
        $('#show-me3').show();
    } else {
        $('#show-me3').hide();
    }
});

【讨论】：

【解决方案3】：

$("myradiobuttonselector").change(function () {
  if ($(this).attr("checked")) {
    $("mydivSelector").show();
  }
  else {
   $("mydivSelector").hide();
  }
});

【讨论】：

【解决方案4】：

这是我使用的。将“mydiv”替换为单选按钮的 id，将“content1”替换为要显示/隐藏的内容。

如果您需要进一步的帮助，请发布一些 html。

$(document).ready(function(){
   $('#content1').hide();

   $('a').click(function(){
      $('#content1').show('slow');
   });

   $(‘#mydiv’).click(function(){
      $('#content1').hide('slow');
   })
});

瑞克

【讨论】：