欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 > 编程资源 > 编程问答 >内容正文

编程问答

jQuery-全选、全不选、反选、提交等功能的实现(试了你就知道)

发布时间：2025/3/21 编程问答 43 豆豆
生活随笔 收集整理的这篇文章主要介绍了 jQuery-全选、全不选、反选、提交等功能的实现(试了你就知道) 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

代码实例如下:

<html><head><base href="<%=basePath%>"><title>My JSP 'practice_02.jsp' starting page</title><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><!--<link rel="stylesheet" type="text/css" href="styles.css">--></head><body> 你爱好的运动是?<input id="checkAll" type="checkbox"/>全选/全不选<br/><form><input type="checkbox" name="item" value="足球"/>足球<input type="checkbox" name="item" value="篮球"/>篮球<input type="checkbox" name="item" value="羽毛球"/>羽毛球<input type="checkbox" name="item" value="乒乓球"/>乒乓球<br/><input id="btn1" type="button" value="全选"/><input id="btn2" type="button" value="全不选"/><input id="btn3" type="button" value="反选"/><input id="btn4" type="button" value="提交"/></form><script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><script type="text/javascript">var $checkAll = $('#checkAll');var $items = $(':checkbox[name=item]');//1.点击'全选'，选中所有爱好$('#btn1').click(function() {$items.prop('checked',true);$checkAll.prop('checked',true);});//2.点击'全不选'，所有爱好都不勾选$('#btn2').click(function() {$items.prop('checked',false);$checkAll.prop('checked',false);});//3.点击'反选'，改变所有爱好的勾选状态$('#btn3').click(function() {$items.each(function() {this.checked = !this.checked;});//统计没有被选中的个数，如果是0的话$checkAll.prop('checked',$items.not(':checked').length==0);});//4.点击'提交'，提示所有勾选的爱好$('#btn4').click(function() {$items.filter(':checked').each(function() {alert(this.value);//this指的是当前被选中的DOM元素});});//5.点击'全选/全不选’，选中所有爱好，或者全不选中$checkAll.click(function() {$items.prop('checked',this.checked);});//6.点击某个爱好时，必要时更新‘全选/全不选’的选中状态$items.click(function() {$checkAll.prop('checked',$items.not(':checked').length==0);});</script></body> </html>

界面效果如下:

测试的话，请读者复制代码自行验证

总结

以上是生活随笔为你收集整理的jQuery-全选、全不选、反选、提交等功能的实现(试了你就知道)的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。