checkbox全选与反选

最新推荐文章于 2022-03-07 22:34:54 发布

azureternite

最新推荐文章于 2022-03-07 22:34:54 发布

阅读量688

点赞数

分类专栏：前端文章标签： checkbox html JavaScript

本文链接：https://blog.csdn.net/azureternite/article/details/52044428

版权

博客详细介绍了如何使用原生JavaScript和jQuery来实现checkbox的选择和反选功能，特别指出在jQuery中检查checkbox状态时应使用prop()而非attr()方法，并提供了事件绑定的实现细节。

摘要由CSDN通过智能技术生成

用原生js跟jquery实现checkbox全选反选的一个例子

原生js：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>checkbox</title>
</head>
<body>
<div id="check-all">
    <input type="checkbox" name="check-all">全选
</div>
<div id="sub-checkbox">
    <input type="checkbox" name="sub-checkbox">
    <input type="checkbox" name="sub-checkbox">
    <input type="checkbox" name="sub-checkbox">
    <input type="checkbox" name="sub-checkbox">
    <input type="checkbox" name="sub-checkbox">
</div>
<script>
    var checkAll = document.querySelector('[name=check-all]');
    var subCheckbox = docum