html单按钮全选全不选代码

HTML中，可以很方便地实现单按钮全选和全不选。下面是一份示例代码，你可以根据自己的需求进行修改。 首先，我们需要一个单选按钮来控制全选和全不选功能。这个按钮的输入类型应该是“checkBox”，用于可以选中和取消选中。

<input type="checkBox" id="checkAll" /> 全选/全不选

接下来，我们需要为每个需要选择的项目添加一个单选按钮。

<p>
  <input type="checkBox" class="checkItem" /> 选项1
</p>
<p>
  <input type="checkBox" class="checkItem" /> 选项2
</p>
<p>
  <input type="checkBox" class="checkItem" /> 选项3
</p>

现在，我们需要使用JavaScript来编写全选和全不选的功能。我们需要为全选/全不选按钮添加一个事件监听器，以便在该按钮被单击时调用相应的函数。

<script>
  document.getElementById("checkAll").addEventListener("click",function(event) {
    var checked = event.target.checked;
    var items = document.getElementsByClassName("checkItem");
    for (var i = 0; i < items.length; i++) {
      items[i].checked = checked;
    }
  });
</script>

在这段JavaScript代码中，我们首先获取了ID为“checkAll”的元素并给它添加了一个“click”事件监听器。然后，我们检查“checked”属性是否为真，如果为真，就将所有具有“checkItem”类的元素的“checked”属性设置为真。反之，我们将所有元素的“checked”属性设置为false。 使用以上代码，当你点击“全选/全不选”按钮时，所有被添加该“checkItem”类的元素都会被选中或取消选中。希望这篇文章可以帮助你更好地理解和掌握HTML中单按钮全选和全不选的代码。