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

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

2 个答案: