更新

Question

此代码无效：

function autoScrub() {
  checkLength = document.querySelectorAll("input[type=checkbox]");
  for (var i=0; i < checkLength.length; i++) {
    if (checkLength[i].attr('data-z') === 1) {
      checkLength[i].checked = true;
    }
  }
}

我的每个复选框都有data-z属性为1或0.我想自动检查所有data-z属性为1的复选框。代码正在打破if (checkLength[i].attr('data-z') === 1) {显然我无法以这种方式读取数据属性。

除此之外，其余代码工作正常。我可以使用checkLength[i].checked = true;它会检查所有复选框，我只是无法在if语句中正确引用其数据属性而我不确定如何。

有什么想法吗？

更新

我用下面的两个解决方案搞砸了，最后提出了：

function autoScrub() {     
  $("input:checkbox").each(function() {
    if ($(this).data("z") == 0) {      
        $(this).prop('checked', true).trigger('change');                                        
    } 
  }); 
}

这很有效。谢谢大家的帮助！

Answer 1

在jQuery中这是一行代码：

$('input[type="checkbox"][data-z="1"]').prop('checked', true);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" data-z="1" /><br />
<input type="checkbox" data-z="0" /><br />
<input type="checkbox" data-z="1" /><br />
<input type="checkbox" data-z="1" /><br />
<input type="checkbox" data-z="0" /><br />

修改

刚刚注意到关于触发更改事件的评论：

$('input[type="checkbox"][data-z="1"]').prop('checked', true).trigger('change');

https://api.jquery.com/trigger/

Answer 2

DOM元素节点没有.attr()方法。我想你正在寻找.getAttribute()。

if (checkLength[i].getAttribute('data-z') === "1") {
  checkLength[i].checked = true;
}

另请注意，您的属性值将是字符串，而不是数字，因此您需要与上面的编辑中的字符串进行比较，否则请与==进行比较。

由于您使用jQuery标记标记了帖子，我将添加您的代码看起来像这样：如果您要走这条路线：

$("input:checkbox").each(function() {
  if ($(this).data("z") == 1)
    this.checked = true;
});

Answer 3

如果您想使用纯html5，请使用HTMLElement.dataset

//  el.dataset.dateOfBirth = '1960-10-03'; // set the DOB.

// 'someDataAttr' in el.dataset === false

//  el.dataset.someDataAttr = 'mydata';
// 'someDataAttr' in el.dataset === true


(function autoScrub() {
  var el = document.querySelectorAll("input[type=checkbox]");
  
  for (var i=0; i < el.length; i++) {
    console.log(el[i].dataset.z)
    if (el[i].dataset.z === "1") {
      console.log(el[i]);
      el[i].checked = true;
    }
  }
})();

<input type=checkbox id=check-1 data-id=111111 data-user=john data-date-of-birth=2jan2010 data-z=1 />
<input type=checkbox id=check-2 data-id=222222 data-user=tambo data-date-of-birth=3feb2011 data-z=2 />
<input type=checkbox id=check-3 data-id=333333 data-user=sandra data-date-of-birth data-z=3 />
<input type=checkbox id=check-4 data-id=444444 data-user=loic data-date-of-birth=4mar2012 data-z=4 />

注意：访问数据

W3C HTML5规范有一个明确的方法来收集数据 JavaScript的。请注意，我们前面不需要“数据 - ” 像getAttribute这样的值;我们直接调用我们的值名称。这种访问方法符合规范，但与许多HTML5功能一样，它仅适用于HTML5浏览器。

使用基于html-5数据属性的javascript选择复选框

更新

3 个答案:

修改