jquery选择checkbox中的值(jquery实现复选框的全选)

来源:国外服务器 在您之前已被浏览:1 次
导读:目前正在解读《jquery选择checkbox中的值(jquery实现复选框的全选)》的相关信息,《jquery选择checkbox中的值(jquery实现复选框的全选)》是由用户自行发布的知识型内容!下面请观看由(国外主机 - www.2bp.net)用户发布《jquery选择checkbox中的值(jquery实现复选框的全选)》的详细说明。
笨笨网美国主机,w ww.2 b p .n e t

切图的时候经常会遇到一些表单的处理,比如全选、反选的效果,切图网在做的时候通常会把这些效果做好,效果并不算复杂,完全可以手写,但是遇到次数多了有必要形成一个有效的方法,方便以后快速套用。

全选复选效果需要注意的是,如果是全部复选框手动选择以后,全选的复选框能不能自动勾选,也是衡量这个插件好用与否的关键。

jquery选择checkbox中的值(jquery实现复选框的全选)

而下面要介绍的这个allCheck.js 就是一个非常简单实用的,未压缩的情况下才1k大小。代码如下();

//1、定义全选的插件jQuery.fn.extend({bindCheck:function($subCheckBox,$btnUncheck){let $allCheckBox = this;//1、给全选复选框绑定click事件//this:是全选复选框(jQuery对象)this.click(function(){let isChecked = this.checked;$subCheckBox.each(function(){this.checked = isChecked;});});//2、给反选if(arguments.length==2){$btnUncheck.click(function(){$subCheckBox.each(function(){this.checked = !this.checked;});reversCheck();});}//3、给每个选择项的复选框绑定事件$subCheckBox.click(function(){reversCheck();});function reversCheck(){//1、判断是否全部的复选框被选中let isAllChecked = true;$subCheckBox.each(function(){if(!this.checked){isAllChecked = false;}});//2、处理全选复选框$allCheckBox.prop("checked",isAllChecked);}}});

调用方法

/*js全选反选*/
$(“#chkAll”).bindCheck($(“#projects_order :checkbox”),$(“#btnUnCheck”));

html代码

<input type=”checkbox” id=”chkAll”>

<div id=”projects_order”><input type=”checkbox” name=”layTableCheckbox” lay-skin=”primary” lay-filter=”checkboxOne”></div>

附选择部分之后,反选的情况代码如下(选择的改为不选中,不选中的改为选中):

$('#projects_order tbody input[type="checkbox"]').each(function(){if($(this).is(":checked")){$(this).prop('checked',false);}else{$(this).prop('checked',true);}});
笨笨网美国主机,w ww.2 b p .n e t
提醒:《jquery选择checkbox中的值(jquery实现复选框的全选)》最后刷新时间 2025-03-21 11:17:31,本站为公益型个人网站,仅供个人学习和记录信息,不进行任何商业性质的盈利。如果内容、图片资源失效或内容涉及侵权,请反馈至,我们会及时处理。本站只保证内容的可读性,无法保证真实性,《jquery选择checkbox中的值(jquery实现复选框的全选)》该内容的真实性请自行鉴别。