Question

我有一堆复选框。其中一些使用checked属性开始检查。当您检查以前未选中的内容或取消选中之前选中的内容时，我会对其进行不同的样式设置，以便用户可以看到更改了哪些复选框。在 Safari 5 中，我正在使用此选择器：

[checked]:not(:checked), :not([checked]):checked{ border:1px solid red; }

它有效，它们有一个漂亮的红色边框。

但是，jQuery似乎无法使用相同的选择器。当我做的时候

$('[checked]:not(:checked), :not([checked]):checked').length

我每次都获得0，以及

$('[checked]:not(:checked)')或$(':not([checked]):checked')。它总是0。

我使用jQuery函数来确定用户是否有未保存的更改。有解决方法吗？如果它一直彻底失败将是一回事，但令人困惑的是它正确地用CSS来设置元素样式，但是jQuery扼流圈。使用jQuery 1.9.1，可以在我尝试过的所有其他浏览器中使用。

Answer 1

您是否正在克隆这些复选框？如果是这样，则在克隆带有checked属性的复选框时，webKit似乎会中断。这意味着，在克隆期间，选中的属性可能不代表原始元素的属性状态。（我说'可能'因为我没有沿着兔子洞去查看在设置support.appendChecked标志时实现的确切方式）

这是jQuery.1.9.1.js中的相关支持检测代码

// #11217 - WebKit loses check when the name is after the checked attribute
input.setAttribute( "checked", "t" );
input.setAttribute( "name", "t" );

fragment = document.createDocumentFragment();
fragment.appendChild( input );

// Check if a disconnected checkbox will retain its checked
// value of true after appended to the DOM (IE6/7)
support.appendChecked = input.checked;

// WebKit doesn't clone checked state correctly in fragments
support.checkClone = fragment.cloneNode( true ).cloneNode( true ).lastChild.checked;

无论哪种方式，我认为我有一个非常简单的解决方法，虽然有一点开销：

准备（或让服务器呈现）任何新的可检查DOM元素，方法是给它们一个表示原始检查状态的属性，如“data-waschecked ='true'”，或使用类，如“class ='waschecked' ”。

这是执行此操作的onload代码：

$(":checked").attr("data-waschecked","true");

或

$(":checked").addClass("waschecked");

然后选择它：

[data-waschecked='true']:not(:checked), :checked:not([data-waschecked='true']) { 
    border:1px solid red; 
}

或

.waschecked:not(:checked),:checked:not(.waschecked) { 
    border:1px solid red; 
}

：safari 5中的not（：checked）选择器不一致的结果

1 个答案: