复选框全选or取消全选

原创已于 2022-08-06 08:50:52 修改 · 128 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#servlet #html #java

于 2022-08-06 08:50:50 首次发布

JavaScript 专栏收录该内容

2 篇文章

订阅专栏

该博客介绍了如何使用JavaScript实现HTML页面中复选框的全选和取消全选功能。通过监听复选框的change事件，动态设置其他复选框的选中状态。示例代码中，当id为'cbTrigger'的复选框被选中时，所有name为'idCB'的复选框将被选中；反之，则全部取消选中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果

代码

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>复选框 全选or取消全选</title>
</head>
<body>
<input class="allChoose" id="cbTrigger" type="checkbox">
<br>
<input name="idCB" value="id1" type="checkbox"> aa
<input name="idCB" value="id2" type="checkbox"> bb
<input name="idCB" value="id3" type="checkbox"> cc
<input name="idCB" value="id4" type="checkbox"> dd
<script src="${pageContext.request.contextPath}/admin/js/jquery.3.6.0.js"></script>
<script>
    $("#cbTrigger").change(function (){
        if($("#cbTrigger").is(':checked')){
            $("input[name='idCB']").attr("checked","true");
        }else {
            $("input[name='idCB']").removeAttr("checked");
        }

    })
</script>
</body>
</html>