Question

这是我有一个不起作用的简单页面的代码：

    <head>
<script src="js/jquery-1.7.min.js"></script>

<script type="text/javascript">
<!--
$("input[type=radio]").on('click', function(){
    if ($('#radio1').is(':checked')){
        $("#grid_9.omega").slideDown("slow");
    } else { 
        $("#grid_9.omega").slideUp("slow");
    }
});
//-->
</script>
</head>

<body>
<form id="form1" name="form1" method="post" action="">
  <p>
    <label>
      <input type="radio" name="RadioGroup1" value="radio1" id="radio1" />
      Radio 1</label>
    <br />
    <label>
      <input type="radio" name="RadioGroup1" value="radio2" id="radio2" />
      Radio 2</label>
    <br />
    <label>
      <input type="radio" name="RadioGroup1" value="radio3" id="radio3" />
      Radio 3</label>
    <br />
  </p>
</form>
<div id="grid_9" class="omega" style="display:none">show me when Radio 1 is chosen</div>
</body>

我的目标是在选择“radio1”时使用jquery显示div“grid_9.omega”，但在未选择“radio1”时隐藏该div。

么？

Answer 1

您可以这样做：

$("input[type=radio]").on('click', function(){
    if(this.id == 'radio1')
        $("#grid_9.omega").slideDown("slow");
    else
       $("#grid_9.omega").slideUp("slow");
});

<强> Working sample

如果您的收音机是动态的，即在页面加载后附加到DOM，那么您需要委托事件处理程序，如下所示：

$('body').on('click', 'input[type=radio]', function() {
  if(this.id == 'radio1')
      $("#grid_9.omega").slideDown("slow");
  else
     $("#grid_9.omega").slideUp("slow");
});

而不是input[type=radio]，您只能使用:radio作为选择器。即

$(':radio').on('click', ...)

或

$('body').on('click', ':radio',..)

注意

如果是委托事件，最好使用任何其他静态元素而不是body。假设，如果您的form1是静态的DOM，即在页面加载时属于DOM，则代替

$('body').on('click', 'input[type=radio]', function() {..})

你应该使用

$('#form1').on('click', 'input[type=radio]', function() {..})

余

将所有代码放在

中

$(document).ready(function() {
  // your code
});

很短

$(function() {
  // your code
});

Answer 2

试试这个：jsFiddle

<script type="text/javascript">
$(function() {
$("input[type=radio]").on('click', function(){
    if ($('#radio1').is(':checked')){
        $("#grid_9.omega").slideDown("slow");
    } else { 
        $("#grid_9.omega").slideUp("slow");
    }
});
});
</script>
<form id="form1" name="form1" method="post" action="">
  <p>
    <label>
      <input type="radio" name="RadioGroup1" value="radio1" id="radio1" />
      Radio 1</label>
    <br />
    <label>
      <input type="radio" name="RadioGroup1" value="radio2" id="radio2" />
      Radio 2</label>
    <br />
    <label>
      <input type="radio" name="RadioGroup1" value="radio3" id="radio3" />
      Radio 3</label>
    <br />
  </p>
</form>
<div id="grid_9" class="omega" style="display:none">show me when Radio 1 is chosen</div>

我从代码中更改的是我在脚本开头添加了文档。

Answer 3

试试这个

<script type="text/javascript">
<!--
$(function(){
    $(document).on('change','input:radio', function(){
        if ($('#radio1').is(':checked')){
            $("#grid_9.omega").slideDown("slow");
        } else { 
            $("#grid_9.omega").slideUp("slow");
        }
    });
}
//-->
</script>

jsFiddle demo

使用jquery根据所选的单选按钮显示div

3 个答案:

注意

余