JqueryMobile Checkbox在页面上没有及时渲染的问题

本文链接：https://blog.csdn.net/MinSnake816/article/details/8734612

在通过js对checkbox的值进行改变的时候我们发现页面上并没有任何改变，这是因为jquerymobile在我们手动改变它的值之后不能重新的渲染，这样页面显示的值就和实际的值不一样的。

接下来我们以JqueryMobile中的全选功能作为例子来讲解：

html的页面在这里就不多写了

首先我们把全选的checkbox的id定为allCheck

把其他的checkbox的name定为check

以下是js代码

$(document).ready(function() {
	$("#allCheck").click(function() {
		var checkeds = document.getElementsByName("check");
		// 如果勾选了
		if (this.checked) {
			for ( var i = 0; i < checkeds.length; i++) {
				if (checkeds[i].type == "checkbox") {
					checkeds[i].checked = true;
					$(checkeds[i]).attr('checked',true).checkboxradio("refresh");
				}
			}
		} else {
			for ( var i = 0; i < checkeds.length; i++) {
				if (checkeds[i].type == "checkbox") {
					checkeds[i].checked = false;
					$(checkeds[i]).attr('checked',false).checkboxradio("refresh");
				}
			}
			
		}
	});
});

上面代码中的

$(checkeds[i]).attr('checked',true).checkboxradio("refresh");

即让页面进行局部的刷新，这样我们就可以看到跟当前值相同的真实效果了。