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-全选、全不选、反选、提交等功能的实现(试了你就知道)相关推荐

用jQuery编写爱好选择器，全选/全不选/反选
功能说明: 1.点击'全选':选中所有爱好 2.点击'全不选':所有爱好都不勾选 3.点击'反选':改变所有爱好的勾选状态 4.点击'提交':提示所有勾选的爱好 5.点击'全选/全不选:选中所有爱好, ...
html实现全选反选,jquery实现全选、不选、反选的两种方法
在取复选框checkbox的属性checked属性值时,发现一个问题,就是当用attr取值时,真的为"checked",假的为"undefined";当用pro ...
php反选全选代码,jQuery中实现全选，反选实例代码（推荐）
1.概述在项目中经常遇到列表中对复选框进行勾选操作,全选...反选.. 2. example 请选择想要学习的编程语言: 全选全不选反选 JavaScript Python Ruby Haskel ...
【七】jquery之属性attr、 removeAttr、prop[全选全不选及反选]
全选全不选界面: 代码: <!DOCTYPE html> <html> <head><meta charset="UTF-8">& ...
（转载+原创）jQuery实现的全选、全不选、反选和半选功能
转载自:https://www.helloweba.com/view-blog-254.html helloweba.com 作者:月光光时间:2014年03月31日 21:12 标签: jQuer ...
好用的下拉选框（单选，多选，全选，清空和反选，及个种样式）----个人钟爱
下拉选框如需样例和具体效果,请点击下面的连接. 好用的下拉选框(单选,多选,全选,清空和反选,及个种样式) 附件一:layui应用formselect layui.config({base: './ ...
jquery高版本全选与全部选无法正常工作
jquery执行全选/全不选的操作 <script type="text/javascript"> $(function(){ $('#checkAll').click ...
jQuery实现checkBox全选全取消
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
JS实现购物车全选、不选、反选的功能（十七）
JS实现购物车全选.不选.反选的功能(十七) 这里没有使用购物车啦,不过原理都是一样的啦效果: <!DOCTYPE html> <html lang="en"& ...

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

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

最新文章

热门文章