首页 > PHP资讯 > HTML5培训技术 > jQuery中实现全选,反选实例代码(推荐)

jQuery中实现全选,反选实例代码(推荐)

HTML5培训技术
1.概述

在项目中经常遇到列表中对复选框进行勾选操作,全选。。。反选。。

2. example

请选择想要学习的编程语言:

<script src="jquery-3.1.0.js">《script》<script type="text/javascript">$(function(){(function(){varform = $('#test-form'),langs = form.find('[name=lang]'),selectAll = form.find('label.selectAll :checkbox'),selectAllLabel = form.find('label.selectAll span.selectAll'),deselectAllLabel = form.find('label.selectAll span.deselectAll'),invertSelect = form.find('a.invertSelect');// 重置初始化状态:form.find('*').show().off();form.find(':checkbox').prop('checked', false).off();deselectAllLabel.hide();// 拦截form提交事件:form.off().submit(function (e) {e.preventDefault();alert(form.serialize());});var count = 1; //点击全选/全不选框次数selectAll.click(function(){if(count++ %2){selectAllLabel.hide();deselectAllLabel.show();$(this).prop("checked", false);langs.prop("checked", true);}else {selectAllLabel.show();deselectAllLabel.hide();$(this).prop("checked", false);langs.prop("checked", false);}});invertSelect.on('click', function(){langs.map(function(){$(this).prop('checked', !this.checked);});});})();});《script》

以上就是jQuery中实现全选,反选实例代码 (推荐)的详细内容,更多请关注 第一PHP社区 其它相关文章!

HTML5培训技术

本文由欣才IT学院整理发布,未经许可,禁止转载。
支持42不支持0