Question

我正在开展一个项目，我希望根据匹配的regEx模式检查复选框。 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

当我使用$（＆＃34;＃＆＃34; + feedname）.click（）;它像我期望的那样工作。所以我正确地呼叫了身份证。

您需要获取id

var feedname = this.id;

this.name返回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();
  };

<强>演示

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

以下是展示问题的演示。

checked

$("<br><input>").attr({
  'id': 'feedname',
  'type': 'checkbox',
}).appendTo('div');

$('#feedname').prop('checked', true);
console.log('feedname id selector targets:', $('#feedname').prop('outerHTML'));

使用唯一ID创建元素，修正代码

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

$.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
}

.prop（）不会更改每个（）循环内的复选框状态

修改

编辑2

2 个答案: