如何正确设置复选框的格式.(最适合jquery和跨浏览器)

how to properly format checkboxes. (best for jquery and crossbrowser)

本文关键字：jquery 浏览器 设置 何正确 复选框 格式      更新时间：2023-09-26

我见过很多方法。我记得我在跨浏览器使用jQuery检索复选框状态时遇到了一些问题。

从html checked到checked="true"和checked="1"甚至checked=checked或checked="yes"

现在…一次为永远。什么是最好的交叉方式?勾选/取消勾选，使jquery最终工作/改变状态吗?

checked属性是一个布尔属性。它接受一个值，并且只有一个值:checked。这在HTML 5中没有改变。

checked="checked"

如果您正在编写HTML(而不是XHTML)，那么您可以只提供值。

         checked
在JavaScript中，checked 属性可以被赋值为true或false。任何其他值都将被转换(例如，"checked"是一个字符串，因此它根据转换字符串的规则进行转换，并成为true)。

这其实很简单，只是jQuery把大家搞糊涂了。

  • 在HTML中使用不带值的checked或checked="checked"。
  • 在XHTML中(尽管实际上不太可能使用它)，使用checked="checked"。

在JavaScript中，复选框的勾选性在每个可脚本浏览器中都以最简单的方式表示:布尔属性。那么，给定HTML

<input id="foo" type="checkbox" checked>

…您可以通过以下方式获取其已检查状态:

var checkbox = document.getElementById("foo");
alert(checkbox.checked);

…并按如下方式设置:

checkbox.checked = false;

。

jQuery的优势在于能够在一次调用中处理多个元素。在jQuery 1.6及以后的版本中，您可以使用prop()完成此操作。在早期版本中，使用attr()。 
$("#foo").prop("checked", false);

不要尝试直接处理属性:简单地使用checked属性，你永远不会出错。在处理HTML时，这适用于几乎所有的属性。

我通常这样做是为了检查它是否被检查过，我从来没有出现过问题:

$('#chk').click(function(){
    $('#show').toggle($(this).is(':checked'));
});

和这个复选/取消选中(jquery 1.6或更高版本):

$('#button').click(function(){
    var chk = $('#chk')
    if(chk.is(':checked')){
        chk.prop('checked', false);
    }else{
        chk.prop('checked', true);
    }
});

要使用jquery检查或取消检查，您应该始终使用prop()，因为它专门针对属性。

在纯HTML中，我认为正确的方法是(当然，如果你不希望复选框被选中，则省略checked):

 <input id='chk' type='checkbox' checked value='1'>

小提琴:http://jsfiddle.net/TTWVd/2/

就我而言，只要checked属性存在，该框就应该被选中，即使您继续将值设置为false，例如checked="false"。

然而，我通常使用checked="checked"，我从来没有遇到过跨浏览器不一致的问题。

然而，MDN文档建议使用布尔值作为字符串(如果有意义的话)。然而，在我上面的例子中，在FireFox 5中，checked="false"仍然检查元素

在JavaScript中，该属性是一个布尔值。在HTML中，属性将被"选中"(这也可以在W3标准中显示——注意(选中)(HTML中的布尔值通常是它们的属性名))

相关文章：