虽然属性值正在更新,但复选框未检查

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);

更新小提琴

代码可以重写为

// 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

小提琴演示