如何正確格式複選框。（最好的jQuery和crossbrowser）

我見過很多方法。我記得我遇到了一些問題，使它跨瀏覽器和檢索複選框狀態與jQuery。如何正確格式複選框。（最好的jQuery和crossbrowser）

從HTML checked

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

現在......一次總是如此。 crossbr的最佳方式是什麼？檢查/取消選中，並使jquery終於工作獲取/更改狀態？

來源

2011-07-18 Ginnani

任何最好的方式來寫複選框和檢索/更改狀態與jquery – Ginnani

我張貼了一些例子 –

這實際上很簡單，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時，這幾乎適用於所有屬性。

來源

2011-07-18 12:08:11

就我而言，只要checked屬性存在，即使您將值設置爲false，checked="false",example也應勾選框。

但是，我通常使用checked="checked"，並且我從來沒有遇到跨瀏覽器不一致問題。

但是，MDN documentation建議使用布爾值作爲字符串（這是有道理的）。但是以我上面的例子來說，在FireFox 5 checked="false"中仍然檢查了這個元素。

來源

2011-07-18 11:23:19

謝謝。是的，但jquery刪除檢查使它就像'checked =「」'是由瀏覽器翻譯，如它仍然被檢查。在某些情況下:) – Ginnani

好吧，夠公平的，你能給出一個具體的例子，包括瀏覽器版本和jQuery版本。 –

我通常做這個檢查，如果它的檢查，我從未有過的問題：

$('#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

正確的方式，我認爲是（當然忽略檢查，如果你不想的複選框被檢查）：

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

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

來源

2011-07-18 11:26:03

不錯！從未使用.prop（）之前。我會做更多的研究。感謝您的演示 – Ginnani

您應該使用prop，因爲'checked'（如'selected'）是一個屬性而不是屬性 –

@Nicola：不，「checked」肯定是一個屬性，並反映在DOM中的一個布爾屬性。 jQuery嚴重地將人們與這些東西混淆了，實際上它非常簡單：請參閱@ Quentin的答案。 –

在JavaScript中，屬性是一個boolean。在HTML中，屬性將爲"checked"（這也可以在W3 standards中顯示 - 注意（選中）（HTML中的布爾值通常是它們的property names找不到W3參考號，但它是對的））。

來源

2011-07-18 11:26:11 cwallenpoole

checked屬性是boolean attribute。它只需要一個值和一個值：checked。這有not changed in HTML 5。

checked="checked"

如果你正在寫HTML（而不是XHTML），那麼你可能只提供價值。

  checked

在JavaScript中，checked屬性可以被分配值true或false。任何其他值將被轉換（例如，"checked"是一個字符串，因此它根據轉換字符串的規則進行轉換並且變成true）。

來源

2011-07-18 11:35:19 Quentin

謝謝Tim和Quentin – Ginnani

如何正確格式複選框。 （最好的jQuery和crossbrowser）

回答

相關問題

如何正確格式複選框。（最好的jQuery和crossbrowser）