原生JS版本和jquery版本实现了复选框的全选/无选/点击选择/内嵌点击选择(Mr.Think)

在日常项目中，对于列表文章或数据，可能会用到全选或不全选的功能。在以前的项目中，checkbox的selection js也写了，但是没有一个被整理出来。就在前几天，一个哥哥遇到了这个问题。简单地说，我花了一些时间分别用原生JS和jQuery编写了一个版本。考虑到使用的灵活性，所需童鞋没有包装，使用时相关参数自行更改。

功能介绍点击此处查看DEMO演示

1.全选/取消全选框，即列表中框的状态与全选/取消全选框之前一致；2.自动更改所有/无复选框的状态，即当列表中的所有复选框都被选中时，所有/无复选框也被选中，反之亦然；3.单击列表行中的复选框，该复选框与1和2中的功能相关联。此外，本文重点写了所有的选择，并且很容易实现鼠标绘制背景颜色的变化。更多完善请参考：

//www . JB 51 . net/article/24125 . htm

原生JS版本的核心代码

Html代码

表单ID=' js '名称=' JS '操作=' #' H5原生JS示例/H5DLD /label/for=' js _ chk _ 0 '输入类型=' checkbox' ID=' js _ chk _ 0 '名称=' chk _ can '值=' '/全选/全选所有Dtdspan 2010-12-12/span输入类型=' checkbox '名称=' JS items '值=' '/全选/全选无用于原生JS实现。您还可以为本机JS实现选择或取消/ddddspan2010-12-12/span输入类型=' checkbox ' name=' JS items ' value=' '/全选/选择无。您还可以为本机JS实现选择或取消/ddddspan2010-12-12/span输入类型=' checkbox ' name=' JS items ' value=' '/全选/选择无。您还可以为本机JS实现选择或取消/ddddspan2010-12-12/span输入类型=' checkbox ' name=' JS items ' value=' '/全选/选择无。您还可以为本机JS实现选择或取消/ddddspan2010-12-12/span输入类型=' checkbox ' name=' JS items ' value=' '/全选/选择无。选择或取消/dddtlabel for=' js _ chk _ 1 '输入类型=' checkbox ' id=' js _ chk _ 1 ' name=' chk _ can ' value=' '/全选/取消全选/label/dt/dl/表单原生js代码

//Native JS实现了全选和无选。window . onload=function icheckall(){ var JS _ chk=document . forms[' JS ']。chk _ canvar js items=document . forms[' js ']。jsitemsvar jsrows=document . getelementbyid(' js ')。getElementsByTagName(' DD ')；//判断选中框数和实际选中框数全部选中/未选中的状态。var chk _ can=function(){ var checked len=0；//计算列表中处于选定状态的复选框数量(var m=0；m jsitems.lengthm ) { if (jsitems[m])。选中){ CheckEdlen=1；} }//判断所选数字是否与实际数字相同，从而确定所有选择/全部选择为(var m=0；m js _ chk.lengthm ) { js_chk[m]。checked=(jsitems . length==checked len)；} }//全选，不选实现(var I=0；i js _ chk.lengthI) {js _ chk [I]。onclick=function(){//列表中复选框和所有复选框的统一状态为(var m=0；m jsitems.lengthm ) { jsitems[m]。checked=this.checked}//为(var m=0)选择统一状态下的所有框；m js _ chk.lengthm ) { js_chk[m]。checked=this.checked} } }//点击获取(var I=0；i jsitems.lengthI) {js项[I]。onclick=function(e){//防止冒泡，避免在行click事件中出现无效复选框。e . stopperpagation(): window . event . cancelubble=true；chk _ canle()；} }//点击获取(var I=0；i jsrows.lengthI) {jsrows [I]。onclick=function(){//在行中单击时，行中的复选框状态为原始状态。拿着这个。getelementsbytagname(' input ')[0]。选中=！this . getelementsbytagname(' input ')[0]。已检查；chk _ canle()；}//请参考http://mrthink.net/javascript-tagnames-highlight/jsrows[I]。onmouseover=function () {this。类名=' hover} jsrows[i]。onmouseout=function(){ this . class name=' '；} }}jquery版本核心代码

Html代码

表单ID=' jq ' name=' jq ' action=' # ' H5jquery sample/H5DLD/label/for=' jq _ chk _ 0 '输入类型=' checkbox ' ID=' jq _ chk _ 0 ' name=' chk _ can '值=' '/选择所有Dtdspan 2010-12-12/span输入类型=' checkbox' name=' jqitems '值=' '/全选/选择无基于JQuery。您也可以选择或取消/ddddspan2010-12-12/span输入类型=' checkbox ' name=' jqitems ' value=' '/全选/基于jQuery选择无。您也可以选择或取消/ddddspan2010-12-12/span输入类型=' checkbox ' name=' jqitems ' value=' '/全选/基于jQuery选择无。您也可以选择或取消/ddddspan2010-12-12/span输入类型=' checkbox ' name=' jqitems ' value=' '/全选/基于jQuery选择无。您也可以选择或取消/ddddspan2010-12-12/span输入类型=' checkbox ' name=' jqitems ' value=' '/全选/基于jQuery选择无。选择或取消/dddtlabel for=' jq _ chk _ 1 '输入类型=' checkbox' id=' jq _ chk _ 1 '名称=' chk _ can '值=' '/全选/全选/无/label/dt/dl/formjquery核心实现代码

//jQ实现$(function(){ var _ Jq _ chk=$(' # jqdldlabel 3360 checkbox ')；var _ jqitems=$(' : checkbox[name=jqitems]')；var _ rows=$(' # jqdld ')；//All _ jq _ chk的一体化实现. click(function(){//list _ jqitems . add(_ jq _ chk)中复选框和一体化复选框的统一状态。attr('选中'，这个。选中)；});check box _ jqitems.click的click事件(函数(e){ //防止冒泡，避免行click事件中无效的复选框。e . stopperpagation()；//判断所选号码是否与实际号码相同，以确定all/none _ jq _ chk.attr ('checked '，_ jqitems . size()==_ jqitems . filter(' : checked ')的状态。size())；});//选择checkbox _ row . bind({鼠标输入： function () {$ (this))。单击行中的addclass(悬停);}，mouseleave:函数(){ $(this)。removeClass('悬停')；}，//点击click:函数(){//在行内点击时，行内的选框状态为原始状态，$ (this)。查找(' :复选框')。attr('选中'，$(这个)。查找(' :复选框')。获取(0)。checked)//判断所选号码是否与实际号码相同，从而判断所有选择/无选择的状态_ jq _ chk.attr ('checked '，_ jqitems . size()==_ jqitems . filter . })；});这段代码比常见的实现代码要多得多，主要说明点击该行就可以实现选择功能。更多功能，更多代码。您可以根据需要将其删除。

我相信很多做web的人都会遇到一些JS的问题，这些问题经常困扰我们是用JQ还是JS来实现。但实际上JS是通用的，JQ是在自己加载的JQ库中构建的，所以在实际实现上没有区别。