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

文章插图
切图的时候经常会遇到一些表单的处理，比如全选、反选的效果，切图网在做的时候通常会把这些效果做好，效果并不算复杂，完全可以手写，但是遇到次数多了有必要形成一个有效的方法，方便以后快速套用。
全选复选效果需要注意的是，如果是全部复选框手动选择以后，全选的复选框能不能自动勾选，也是衡量这个插件好用与否的关键。
而下面要介绍的这个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);}});

以上关于本文的内容，仅作参考！温馨提示：如遇健康、疾病相关的问题，请您及时就医或请专业人士给予相关指导!

「四川龙网」www.sichuanlong.com小编还为您精选了以下内容，希望对您有所帮助：