Javascript .prop()不会从每个()循环内部更改复选框状态
我正在做一个项目,我想在匹配正则表达式模式的基础上选中复选框 我遇到了一个非常奇怪的行为:Javascript .prop()不会从每个()循环内部更改复选框状态,javascript,jquery,html,checkbox,Javascript,Jquery,Html,Checkbox,我正在做一个项目,我想在匹配正则表达式模式的基础上选中复选框 我遇到了一个非常奇怪的行为: function checkRegEx() { $.each(myjson, function (i, v) { var feedname = this.name; var regExPat1 = document.getElementById('regExField').value; var regExPat = new RegExp(regExPat1, 'gi
function checkRegEx() {
$.each(myjson, function (i, v) {
var feedname = this.name;
var regExPat1 = document.getElementById('regExField').value;
var regExPat = new RegExp(regExPat1, 'gi');
var matched_bool = regExPat.test(feedname);
//console.log(matched_bool==true);
if(matched_bool==true) {
$("#"+feedname).prop('checked',true);
//$("#"+feedname).click(); // THIS WORKS STRANGELY
console.log($("#"+feedname).prop('checked'));
//console.log("eval TRUE #" + feedname)
} else {
$("#"+feedname).prop('checked', false);
//console.log("eval FALSEE #" + feedname)
};
});
document.getElementById("regExField").focus();
};
我可以更改并读取复选框的状态,但不会影响GUI。
当我使用$(“#”+feedname)时,单击()代码>它的工作原理与我预期的一样。所以我把身份证打对了。我正在开发最新的Chrome浏览器。奇怪的是,我发现了另一个。这里的prop
方法适合我。所以这不可能是浏览器的问题
(我知道jsiddle使用jquery_edge,这不是它在那里工作而在我的中不工作的原因-我在两个jsiddle中测试了不同的jquery版本)
任何建议。我看不出我做错了什么
编辑
请注意,尽管调用了var feedname=this.name代码>我仍然在引用ID。(MyJSFIDLE代码在此处发布的代码上方的一些行)
编辑2
我将myjson ID重命名为“foo”
在代码部分
var feedname = this.name;
...
$("<br><input>").attr({
'id' : feedname,
'type': 'checkbox',
...
var feedname=this.name;
...
$(“
”)属性({
“id”:feedname,
'类型':'复选框',
...
我正在将ID名称设置为复选框标签名称。我做错了什么:/
当我使用$(“#”+feedname.)click()时,它的工作方式与我预期的一样。所以
我打对了身份证
您需要通过以下方式获取id
var feedname = this.id;
this.name
返回name属性,而不是id
此外,您需要确保ID不重复(请检查此项)
正则表达式
您正在创建具有重复ID的元素,因此该元素不工作。以下代码将创建具有相同ID的
和输入元素,这将导致问题,因为ID选择器将针对第一个元素
,因此.prop()
没有任何影响,因为“
”没有选中属性
下面是一个演示来展示这个问题
$(“
”).attr({
“id”:“feedname”,
'类型':'复选框',
}).附录(“div”);
$('#feedname').prop('checked',true);
console.log('feedname id选择器目标:',$('#feedname').prop('outerHTML');
您的代码不需要if语句。只需使用$('#'+feedname).prop('checked',matched_bool);
。这会优化代码。但让我们看看它是否解决了问题,不要这样。更新了我的JSFIDLE。它仍然不起作用。我使用if语句是因为只使用了click()有一些效果。但是您首先想要实现的是什么…您的JSON具有id
和name
两者…但是您的选择器需要id
(因为您使用的是。
)。是的,注释不是答案,它们是注释…您的解释更精确,尤其是在开始时(我不想再添加同样的解释:)…OP应该选择你的答案。我完全明白出了什么问题。我自己会花很长时间才能找到它。@AndreElrico检查Satpal的答案。
$.each(myjson, function(i, v) {
var feedname = v.name
var id = v.foo;
$("#calsubscribe").append($("<label>").text(feedname).prepend(
$("<input>").attr({
'type': 'checkbox',
'id': "check_"+id,
'class': 'inp-checkbox',
'name': 'subscribecal',
"data-feed": feedname
}).val(v.id)
.prop('checked', this.checked)
));
});
function checkRegEx() {
$.each(myjson, function(i, v) {
var regExPat1 = document.getElementById('regExField').value;
var regExPat = new RegExp(regExPat1, 'gi');
var matched_bool = regExPat.test(v.name);
var selector = "#check_" + v.foo;
$( selector ).prop('checked', matched_bool);
console.log(selector,regExPat,matched_bool);
});
document.getElementById("regExField").focus();
};