checkbox全选,全不选,反选

最新推荐文章于 2024-03-24 16:40:54 发布

xingyuner2

最新推荐文章于 2024-03-24 16:40:54 发布

阅读量358

点赞数

分类专栏： JQuery 文章标签：前端 checkbox

JQuery 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一个简单的网页应用案例，通过JavaScript和jQuery实现了复选框的全选、全不选及反选功能。该应用展示了如何使用jQuery选择器操作DOM元素状态，适用于前端开发初学者学习。

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

//checkbox全选,全不选,反选

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>复选框</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
<script>
$(function(){
$("#checkall").click(function(){

$(":checkbox").attr("checked","true");
})
$("#checkallNo").click(function(){

$(":checkbox").removeAttr("checked");
})
$("#check_revsern").click(function(){

$(":checkbox").each(function(){
this.checked=!this.checked;
})
})
})

</script>
</head>
<body>
您的爱好很广泛!!!
<br>
<br>
<input type="checkbox" name="items" checked="checked" value="足球" />足球
<input type="checkbox" name="items" value="篮球"/>篮球
<input type="checkbox" name="items" value="游泳"/>游泳
<input type="checkbox" name="items" value="唱歌"/>唱歌
<br>
<input type="button" name="checkall" id="checkall" value="全选" />
<input type="button" name="checkall" id="checkallNo" value="全不选" />
<input type="button" name="checkall" id="check_revsern" value="反选" />
</body>
</html>