使用jquery实现全选反选效果

最新推荐文章于 2022-08-29 21:32:04 发布

HAI6545

最新推荐文章于 2022-08-29 21:32:04 发布

阅读量213

点赞数 1

分类专栏： JavaScript案例文章标签： jquery javascript 前端

本文链接：https://blog.youkuaiyun.com/HAI6545/article/details/122546539

版权

JavaScript案例专栏收录该内容

105 篇文章

订阅专栏

本文介绍如何利用jQuery实现表格中全选和反选的效果。通过绑定点击事件到全选按钮，更新所有复选框的状态，达到一键全选或全不选的功能。同时，当表格中任意复选框状态改变时，也会同步更新全选按钮的状态。

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


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src =" https://code.jquery.com/jquery-3.6.0.min.js "></script>
</head>
<body>
<button>全选</button>
<button>全不选</button>
<button>反选</button>
<br>
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
</body>
<script>
$('button').first().click(() => $(':checkbox').prop('checked', true))
$('button').first().next().click(() => $(':checkbox').prop('checked', false))
$('button').last().click(() => {
    // 获取属性的时候，没有隐式迭代了，只能获取到第一个
    // console.log($(':checkbox').prop('checked'));
    // $(':checkbox').prop('checked',    !$(':checkbox').prop('checked')      ) // 错误写法

    // jquery提供了一个方法，专门用于遍历jquery获取到的伪数组的
    // 伪数组.each(function(index, value){})
    $(':checkbox').each((i, v) => {
        // console.log(i, '----------------', v);
        
        // console.log(i, '---', $(v).prop('checked') )
        // $(v).prop('checked', !$(v).prop('checked'))
        v.checked = !v.checked
    })
})
</script>
</html>