Question

嘿伙计们，我可以用什么功能来说，如果选中这个单选按钮就会显示这个'div'。提前谢谢。

Answer 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 Library 1.8.x

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

jQuery Library 1.9.x

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

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

Answer 2

我喜欢@ tinifni的jsfiddle。这是根据收音机显示或隐藏的3个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();
    }
});

Answer 3

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

Answer 4

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

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

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

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

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

瑞克

jQuery单选按钮显示div

4 个答案: