雖然屬性值正在更新，但複選框未檢查

Question

我有一個複選框，我想每隔2秒使用setInterval檢查/取消選中。

但它只被檢查/取消選中一次。

另外，當我檢查DOM時，我可以看到它的值和checked屬性正在更新，但它並不反映在視圖中。

這裏是我的代碼

HTML

<input type="checkbox" name="paid" id="paid-change" value = "1"> 

JS

var getCheckBox = $("#paid-change"); 

function check(){ 
getCheckBox.attr('checked',true); 
getCheckBox.val("1") 
} 
function uncheck(){ 
getCheckBox.attr('checked',false); 
getCheckBox.val("0") 
} 

// check/uncheck in every 2 seconds 
setInterval(function(){ 
switch (getCheckBox.val()){ //get checkbox value 
case "0": 
    check() // if value is 0 check it 
    break; 
case "1": 
    uncheck() //uncheck it 
    break; 
} 

},2000) 

這裏是一個jsfiddle。

檢查元素，你的屬性正在更新，但沒有反映在視圖上。

任何想法，我犯錯了嗎？

Answer 1

而不是attr()設置checked屬性，請使用prop()。

getCheckBox.prop('checked', true); 

Updated Fiddle

---

該代碼可以被改寫爲

// Cache checkbox object 
var checkbox = $("#paid-change"); 

// Function to toggle the checkbox value and state 
function toggleCheckbox() { 
    // Change the 'checked' property 
    checkbox.prop('checked', function(i, checked) { 
     return !checked;       // Invert the checked status 
    }).val(function(i, val) { 
     return +this.checked;      // Change the value 
    }); 
} 

setInterval(toggleCheckbox, 2000);     // Call the function after each 2 seconds 

Fiddle Demo

Answer 2

使用.prop()代替.attr()選擇或取消任何複選框

演示：https://jsfiddle.net/a9p1wqm1/

getCheckBox.prop('checked',false);