js表单全选和取消全选

以下是一个实现js表单全选和取消全选的示例代码：

HTML代码：

<form id="myForm">
  <label><input type="checkbox" name="fruit" value="apple">苹果</label><br>
  <label><input type="checkbox" name="fruit" value="banana">香蕉</label><br>
  <label><input type="checkbox" name="fruit" value="orange">橙子</label><br>
  <label><input type="checkbox" name="fruit" value="watermelon">西瓜</label><br>
  <button type="button" onclick="selectAll()">全选</button>
  <button type="button" onclick="cancelAll()">取消全选</button>
</form>

JavaScript代码：

function selectAll() {
  var checkboxes = document.getElementsByName("fruit");
  for (var i = 0; i < checkboxes.length; i++) {
    checkboxes[i].checked = true;
  }
}

function cancelAll() {
  var checkboxes = document.getElementsByName("fruit");
  for (var i = 0; i < checkboxes.length; i++) {
    checkboxes[i].checked = false;
  }
}

说明：

1. HTML代码中，给每个复选框元素添加了相同的name属性，表示它们属于同一组；
2. HTML代码中，分别添加了“全选”和“取消全选”两个按钮，并分别绑定了selectAll()和cancelAll()两个函数；
3. JavaScript代码中，分别实现了selectAll()和cancelAll()两个函数，用于全选和取消全选；
4. JavaScript代码中，使用document.getElementsByName()方法获取所有name属性为“fruit”的复选框元素，并使用循环遍历每个元素，设置其checked属性为true或false，从而实现全选和取消全选的功能。