.prop() 不会从 each() 循环内部更改复选框状态

Question

我正在做一个项目，我想根据匹配的正则表达式模式检查复选框。 MY_JSFIDDLE

我遇到了一个非常奇怪的行为：

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).click(); 时，它会按我的预期工作。所以我打电话给ID是对的。我正在开发最新的 Chrome。奇怪的是我发现了另一个jsfiddle。这里prop 方法对我有用。所以这不可能是浏览器问题。

（我知道 jsfiddle 使用 jquery_edge，这不是它在那里工作而不是在我的工作的原因——我在两个 jsfiddles 中测试了不同的 jquery 版本）

任何建议。看不到我在这里做错了什么。

编辑

请注意，尽管我调用了var feedname = this.name;，但我仍然引用了 ID。 （myjsfiddle 代码在此处发布的代码上方的几行代码）

编辑 2

我将 myjson IDS 重命名为“foo”。

在代码部分

var feedname = this.name;
...
            $("<br><input>").attr({
                'id'  : feedname, 
                'type': 'checkbox', 
...

我将 ID 名称设置为复选框标签名称。我做错了什么：/

Answer 1

当我使用 $("#"+feedname).click();它按我的预期工作。所以 我说的对。

您需要通过

获取id

var feedname = this.id;

this.name 返回名称属性，而不是 id。

另外，您需要确保 id 不重复（检查此fiddle）

  $.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();
  };

演示

var JSONsettings = [{
    name: "Full_Feed",
    foo: "13",
    checked: false
  }, {
    name: "Trip_Feed",
    foo: "53",
    checked: false
  }, {
    name: "Flight_Feed",
    foo: "27",
    checked: false
  }, {
    name: "Klight_Feed",
    foo: "33",
    checked: false
  }

];
var myjson = JSONsettings;

$.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);
  });
  document.getElementById("regExField").focus();
};

$('#regExField').keyup(function() {
  checkRegEx();
});

.inp-checkbox {
  border: 3px solid #444
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="regExField" type="text" value="^f">regEx
<div id="calsubscribe"></div>

Answer 2

您正在创建具有重复 ID 的元素，因此它不起作用。以下代码将创建具有相同 id 的 <br> 和 input 元素 这会导致问题，因为 ID 选择器将定位第一个元素 <br> 因此 .prop() 没有任何影响'
' 没有 checked 属性。

这是一个展示问题的演示。

$("<br><input>").attr({
  'id': 'feedname',
  'type': 'checkbox',
}).appendTo('div');

$('#feedname').prop('checked', true);
console.log('feedname id selector targets:', $('#feedname').prop('outerHTML'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>

---

创建具有唯一 ID 的元素，修改后的代码

$.each(myjson, function(i, v) {
  var feedname = this.name
  var input = $("<input>").attr({
      'id': feedname,
      'type': 'checkbox',
      'class': 'inp-checkbox',
      'name': 'subscribecal',
      "data-feed": feedname
    }).val(this.id)
    .prop('checked', this.checked);

  $("#calsubscribe").append(
    $("<label>").text(this.name)    
    .prepend(input)
    .prepend('<br>')
    );
});

var JSONsettings = [{
    name: "Full_Feed",
    foo: "13",
    checked: false
  }, {
    name: "Trip_Feed",
    foo: "53",
    checked: false
  }, {
    name: "Flight_Feed",
    foo: "27",
    checked: false
  }, {
    name: "Klight_Feed",
    foo: "33",
    checked: false
  }
];

//Removed
//localStorage.setItem("fdsettings", JSON.stringify(JSONsettings));
var myjson = JSON.parse(JSON.stringify(JSONsettings));

/*
      0) $.getJson FROM SERVER DB
      1) SET INCOMING JSON TO LOCAL STORAGE
      2) SET UP THE CHECK BOX LIST FROM THE JSON IN LOCAL STORAGE
      3) GATHER NEW JSON SETTINGS ON PRESS AND SAVE TO LOCAL STORAGE
      */
// myjson  // JSONsettings[feeds]
$.each(myjson, function(i, v) {
  var feedname = this.name
  var input = $("<input>").attr({
      'id': feedname,
      'type': 'checkbox',
      'class': 'inp-checkbox',
      'name': 'subscribecal',
      "data-feed": feedname
    }).val(this.id)
    .prop('checked', this.checked);
    
  $("#calsubscribe").append(
  	$("<label>").text(this.name)    
    .prepend(input)
    .prepend('<br>')
    );
});

function checkRegEx() {
  var regExPat1 = document.getElementById('regExField').value;
  var regExPat = new RegExp(regExPat1, 'gi');
  $.each(myjson, function(i, v) {
    var feedname = this.name;
    var matched_bool = regExPat.test(feedname);
    $("#" + feedname).prop('checked', matched_bool);
  });
  document.getElementById("regExField").focus();
};

$('#regExField').keyup(checkRegEx).keyup();

.inp-checkbox {
  border: 3px solid #444
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="regExField" type="text" value="^f">regEx</input>
<div id="calsubscribe"></div>