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

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