使用jQuery預設HTML tickbox

Question

此代碼，

$("#x").removeAttr("checked").removeAttr("unchecked").attr("foo","bar"); 

結果在這個網站輸入：

<input type="checkbox" id="x" foo="bar"> 

然而這樣的：

$("#x").removeAttr("checked").removeAttr("unchecked").attr("checked","true"); 

結果在此：

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

這是怎麼回事？儘管檢查=「檢查」屬性，該複選框仍然固執地未選中。

切換HTML輸入的checked屬性的最佳方式是什麼？

Answer 1

要切換檢查使用.prop()代替.attr()：

$('#x').prop('checked',true); 
$('#x').prop('checked',false); 

如果想要另一個按鈕來切換複選框可以使用：

var $x = $('#x'); // don't query every click - Credit: Roko :) 
$('.button').click(function(){  
    $x.prop('checked', !$x.is(':checked')); 
}) 

Answer 2

checked="true"是不正確的HTML所以jQuery是隱式轉換它到checked="checked"。另一個答案提供了一個更好的解決方案，因爲在這種情況下不需要使用removeAttr。

Answer 3

$('#x')[0].checked = true; // true/false 

http://jsbin.com/ivufen/1/edit

切換：

var $cbx = $('#x')[0]; 

$('#toggle').click(function(){ 
    $cbx.checked = !$cbx.checked; 
}); 

http://jsbin.com/ivufen/3/edit