Javascript问题,加载时选中所有复选框

时间:2017-03-08 15:02:06

标签: javascript checkbox

我有一个按钮,单击该按钮将选择/取消选择页面上输出的所有检查。这非常有效。我希望它们加载取消选择,当单击按钮时,它们会被选中。现在我只能让它们加载选中才能使它工作。我已经尝试搞乱这个代码,但我不能让这些加载取消选择。用javascript我不是很好。任何人都可以看到我将如何使用此代码执行此操作?或者我必须采用不同的方式吗?

var checkflag = "true";
function check(field) {
  if (checkflag == "false") {
    for (i = 0; i < field.length; i++) {
      field[i].checked = true;
    }
    checkflag = "true";
    return "Deselect All";
  }
  else {
    for (i = 0; i < field.length; i++) {
      field[i].checked = false;
    }
    checkflag = "false";
    return "Select All";
  }
}

<input class="btn btn-large btn-primary btn-block" type="button" name="CheckAll" value="Deselect All" onClick="this.value=check(this.form,true)"     style="width:115px;">

2 个答案:

答案 0 :(得分:0)

您正在函数调用中传递表单。在check() - Function中你需要从表单中获取字段。

喜欢:

check( form, newStat ) {
  var fields = form.fields;
  for (field in fields ) {
    field.checked = newStat;
  }
}

这绝不是经过测试的代码。只需将其作为&#34;伪代码&#34;

答案 1 :(得分:0)

这应该会让你走上正轨。您只需要修改'document.querySelectorAll('。checkbox')'行。确保选择文档中的框。所有nodelists都可以访问forEach方法。三元运算符只是检查.checked值是否为真。如果是这样,它会将其设置为false。否则它会将其设置为真。

<body>
  <button name="checkAll">Un/Check All</button>
</body>
<script>

const checkboxes = document.querySelectorAll('.checkbox');
const checkAll = document.querySelector('checkAll');

function toggleAll(field) {
  checkboxes.forEach(checkbox => 
    checkbox.checked ? checkbox.checked = false : checkbox.checked = true);
};

checkAll.addEventListener('click', toggleAll);

</script>