0

我正在尝试通过选择和取消选择此脚本后的复选框来更改 div 的 css 显示属性：

<td>
 <input type="checkbox" id="c1" name="cc" />
 <label for="c1"> <span> </span>  Display : None  </label>
 <input type="checkbox" id="c2" name="cc" /> 
 <label for="c2"><span> </span> Display : Inline   </label>
</td>

jquery是：

 $('input:checkbox').change(function(){
   if($('#c2').attr('checked');){
     $('#hiddendiv').css("display", "block"); 
    }else{
     $('#hiddendiv').css("display", "none"); 
   }
 });

如您所见，我有两个复选框，我想在第二个复选框被选中或未选中时显示一个隐藏的 div。

你能告诉我为什么这不起作用吗？

4

4 回答 4

1

语法错误 - 其他一切正常：

http://jsfiddle.net/jmsessink/uKGkN/

$('input:checkbox').change(function(){
  if($('#c2').attr('checked')){
    $('#hiddendiv').css("display", "block"); 
   }else{
    $('#hiddendiv').css("display", "none"); 
  }
}); ​
于 2012-12-07T21:18:28.157 回答
1

您应该使用 .prop() 而不是 .attr()

工作示例FIDDLE

$('input:checkbox').change(function() {

    $('input:checkbox').not(this).prop('checked', false);

    if ($('#c2').prop('checked')) {
        $('#hiddendiv').css({"display" : "block"});
   } else {
        $('#hiddendiv').css({"display" : "none"});
    }

});
于 2012-12-07T21:22:18.580 回答
0

我在这里看到的几个问题

  1. 如评论中所述，您有语法错误。
  2. 您的逻辑意味着 c1 和 c2 值是互斥的，因此您确实应该radio为此使用输入
  3. attr()不是检查输入是否被检查的好方法。改为使用prop()。有关差异，请参阅 jQuery 文档。

这是一个简化的示例

于 2012-12-07T21:18:44.247 回答
0

您的代码有一些 sintax 问题。attr()方法不好获取值并按照您的意愿进行测试。取而代之的是，您可以使用is()方法并检查checked属性是否为真。尝试做这样的事情：

$('input:checkbox').change(function(){
   $('#hiddendiv').css("display", $('#c2').is(':checked') ? "block" : "none"); 
});

PS：如果想sender在 change 事件中获取（复选框已更改），可以通过$(this).

于 2012-12-07T21:19:55.833 回答