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

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 2

在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 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那样在值前面使用“data-”；我们只是直接调用值名。该访问方法符合规范，但与许多HTML5特性一样，它只在HTML5浏览器中工作。