欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

JQ checkbox 全选和全不选

程序员文章站 2022-05-31 12:05:17
...

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

<!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>

 

效果图:
JQ checkbox 全选和全不选