JQ checkbox 全选和全不选

一键全选功能实现

最新推荐文章于 2023-03-29 23:13:48 发布

最新推荐文章于 2023-03-29 23:13:48 发布 · 329 阅读

文章标签：

#checkbox #全选和全不选 #一行代码搞定 #JQ

境-JS 专栏收录该内容

197 篇文章

订阅专栏

本文介绍了一种简单的方法来实现网页上的一键全选功能。通过一个全选按钮控制一组复选框的状态，利用JavaScript代码使得点击全选按钮时能够同步更新所有子复选框的选择状态。

下面就介绍如何用一句话搞定全选功能

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="box">
    <input type="checkbox" onclick="checkAll(this)">全选<br><br>
    <input type="checkbox"><br>
    <input type="checkbox"><br>
    <input type="checkbox"><br>
    <input type="checkbox"><br>
    <input type="checkbox"><br>
    <input type="checkbox"><br>
    <input type="checkbox"><br>
    <input type="checkbox"><br>
    <input type="checkbox"><br>    
</div>
<script type="text/javascript" src="jquery-1.10.1.min.js" ></script>
<script>
function checkAll(obj){
    $("#box input[type='checkbox']").prop('checked', $(obj).prop('checked'));
}
</script>
</body>
</html>

效果图：