jquery checkbox全选

原创于 2017-11-23 17:56:10 发布 · 289 阅读

0 ·

CC 4.0 BY-SA版权

jquery 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一个简单的jQuery示例，用于实现网页中多个复选框的全选与取消全选功能。通过点击全选按钮，利用prop方法同步更新所有子项的状态。

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

jquery 使用prop() checkbox全选:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="favicon.ico">
    <title></title>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
</head>
<body>
<input type="checkbox" id="all"> 全选
<div>
    <input type="checkbox"> 类别1
    <input type="checkbox"> 类别2
    <input type="checkbox"> 类别3
    <input type="checkbox"> 类别4
</div>
<script>
    $(function () {
        $('#all').click(function(){
            $(this).siblings('div').find('input[type=checkbox]').prop('checked',$(this).prop('checked'));
        })
    })
</script>
</body>
</html>