Question

我正在尝试通过选择和取消选择此脚本后面的复选框来更改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。

请告诉我为什么这不起作用？

Answer 1

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

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

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

Answer 2

您应该使用.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"});
    }

});

Answer 3

我在这里看到的问题很少

如评论中所述，您有语法错误。
你的逻辑暗示c1和c2值是互斥的，所以你真的应该使用radio输入
attr()不是检查输入是否被检查的好方法。请改用prop()。请参阅jQuery docs for diferences。

这是一个简化的sample

Answer 4

您的代码存在一些sintax问题。 attr()方法不适合获取您想要的值和测试。而不是它，您可以使用is()方法并检查checked proeprty是否为true。尝试做这样的事情：

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

PS：如果您想在更改事件中获取sender（已更改复选框），则可以$(this)。{/ p>

是否选中了jQuery Checkbox的问题

4 个答案: