JQ 最少代码实现全选和不全选

iteye_17658

于 2017-01-17 14:32:21 发布

阅读量205

点赞数

分类专栏：境-JS 文章标签： JQ全选和不全选全选和不全选

境-JS 专栏收录该内容

197 篇文章

订阅专栏

本文介绍了一个简单的全选功能实现方式，通过使用JavaScript配合HTML来控制一组复选框的状态。当点击“全选”按钮时，页面中所有复选框的状态会跟随变化。

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

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

效果图：