jQuery实现全选全不选和反选

hyb0852

于 2013-04-01 19:54:18 发布

阅读量434

点赞数

本文链接：https://blog.youkuaiyun.com/hyb0852/article/details/8748179

版权

本文介绍了一个简单的网页表单中实现全选、全不选及反选功能的方法。通过使用jQuery库，该示例展示了如何为一组复选框设置统一的操作，包括一键全选、一键全不选以及快速反选所有已选项目。

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

<html>
<head>
<meta charset="utf-8"/>
<title>表单的全选和反选</title>
<script type="text/javascript" src="script/jquery-1.4.2.min.js"></script>
<script>
$(function(){
    $("#checkAll").click(function(){
    $(":checkbox").attr("checked",true);
});
    $("#checkNo").click(function(){
    $(":checkbox").attr("checked",false);
});
    $("#reverse").click(function(){
    $(":checkbox[name=items]").each(function(){
    $(this).attr("checked",!$(this).attr("checked"));
});
});
});
</script>
</head>
<body>
<form action="#" method="post">
    <input type="checkbox" name="items" value="篮球">篮球
<input type="checkbox" name="items" value="足球">足球
<input type="checkbox" name="items" value="网球">网球
<input type="checkbox" name="items" value="冰球">冰球</br>
<input type="button" id="checkAll" value="全选">
<input type="button" id="checkNo" value="全不选">
<input type="button" id="reverse" value="反选">

</body>
</html>