0

这是我无法正常工作的简单页面的代码：

    <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​&lt;/div>
</body>

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

建议？

4

3 回答 3

3

只需您可以：

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

工作样本

如果您的收音机是动态的，即在页面加载后附加到 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用作选择器。IE

$(':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
});
于 2012-06-27T02:13:57.543 回答
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>

我对您的代码所做的所有更改是在脚本的开头添加了准备好的文档。

于 2012-06-27T01:54:32.980 回答
1

试试这个

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

于 2012-06-27T01:23:59.223 回答