原生JS版和jquery版实现checkbox的全选/全不选/点选/行内点选(Mr.Think)

时间：2016.11.16 发布人：e9482644

已解决问题

谷歌e9482644用户在2016.11.16提交了关于“武汉会战原生JS版和jquery版实现checkbox的全选/全不选/点选/行内点选(Mr.Think)”的提问，欢迎大家涌跃发表自己的观点。目前共有1个回答，最后更新于2025-03-12T21:26:00。希望大家能够帮助她。

详细问题描述及疑问：期待您的答案，我不知道说什么才好,除了谢谢！

希望以下的回答，能够帮助你。

第1个回答

用户名：yd28c850r 时间：2016.11.17

日常项目中,对于列表类文章款范题行逐胡评级或**,大概都会来自用到checkbox的全选或全问答不选的功能,以前的项目中也写过checkbox的选择js,但都没有整理过比最名球.正好前几天一个兄弟遇到了这个问题,索性,我花了路滑翻快解油图区次似点时间,用原生JS与jQuery分别写了一个版本,考虑到使用时灵活性问题,未封装,需要的童鞋使首州顺量年亲看故单用时自行改下相关参数.

功能介绍战操投点此查看DEMO演示

1.全选/全不选选框一体实现,即列表中选另装和儿作道语低肥微波框的状态与全选/全不选框呀比待半前的选框状态一致;
2.自动更改全选/全不选选框影击停真使的状态,即列表中选框都选中时,全选/全不选选框也选中,反之亦然;
3.列表行内点击也可选中行内的checkbox,并与1,2中的功能联动.
另,本今台粮客硫混响扩文重在写全选,鼠标划入离几置台持耐划出背景变色为简易实现,更加完善的请参考:

http://www.***.net/ar先这饭他又ticle/24125.htm

原生JS版本核心代码

html代码

<formid="来临热东程医造速到着饭js"name="js"action="#"><h5>原生JS样例</h5><dl><dt><labelfor触建画务数="js_chk_0"><inputtype="checkbox"id="js_chk_0"name="chk_can"value=""/>全选/全不选</label></dt><dd><s输题谁pan>2010-12-12</span><input轻是上孩帮革查段乙批type="checkbox"name="jsitems岩外宪"value=""/>原生JS实现的全选/全不选,点行也可选中或取消</dd><dd><span>2010-12-12</span><inputtype="checkbox"name="jsitems"value=""/>原生JS实现的全选/全不选,点行也可选中或取消</dd><dd><span>2010-12-12</span><inputtype="checkbox"name="jsitems"value=""/>原生JS实现的全选/全不选,点行也可选中或取消</dd><dd><span>2010-12-12</span><inputtype="checkbox"name="jsitems"value=""/>原生JS实现的全选/全不选,点行也可选中或取消</dd><dd><span>2010-12-12</span><inputtype="checkbox"name="jsitems"value=""/>原生JS实现的全选/全不选,点行也可选中或取消</dd><dt><labelfor="js_chk_1"><inputtype="checkbox"id="js_chk_1"name="chk_can"value=""/>全选/全不选</label></dt></dl></form>

原生js代码

//原生JS实现全选全不选类window.onload=functioniCheckAll(){varjs_chk=document.forms['js'].chk_can;varjsitems=document.forms['js'].jsitems;varjsrows=document.getElementById('js').getElementsByTagName('dd');//判断选中个数与实际选框个数实现全选/全不选框的状态varchk_canle=function(){varcheckedLen=0;//计算列表中选中状态的选框个数for(varm=0;m<jsitems.length;m++){if(jsitems[m].checked){checkedLen+=1;}}//判断选中个数与实际个数是否相同,以确定全选/全不选状态for(varm=0;m<js_chk.length;m++){js_chk[m].checked=(jsitems.length==checkedLen);}}//全选与全不选一体实现for(vari=0;i<js_chk.length;i++){js_chk[i].onclick=function(){//列表中选框与全选选框统一状态for(varm=0;m<jsitems.length;m++){jsitems[m].checked=this.checked;}//全选选框统一状态for(varm=0;m<js_chk.length;m++){js_chk[m].checked=this.checked;}}}//列表中选框点击for(vari=0;i<jsitems.length;i++){jsitems[i].onclick=function(e){//阻止冒泡,避免行点击事件中,直接选择选框无效e&&e.stopPropagation?e.stopPropagation():window.event.cancelBubble=true;chk_canle();}}//行内点击for(vari=0;i<jsrows.length;i++){jsrows[i].onclick=function(){//行内点击时,行内的选框状态为原状态取反this.getElementsByTagName('input')[0].checked=!this.getElementsByTagName('input')[0].checked;chk_canle();}//划入划出请参考http://***.net/j**ascript-tagnames-**light/jsrows[i].onmouseover=function(){this.className='hover';}jsrows[i].onmouseout=function(){this.className='';}}}

jquery版本核心代码

html代码

<formid="jq"name="jq"action="#"><h5>jQuery样例</h5><dl><dt><labelfor="jq_chk_0"><inputtype="checkbox"id="jq_chk_0"name="chk_can"value=""/>全选/全不选</label></dt><dd><span>2010-12-12</span><inputtype="checkbox"name="jqitems"value=""/>基于jQuery的全选/全不选,点行也可选中或取消</dd><dd><span>2010-12-12</span><inputtype="checkbox"name="jqitems"value=""/>基于jQuery的全选/全不选,点行也可选中或取消</dd><dd><span>2010-12-12</span><inputtype="checkbox"name="jqitems"value=""/>基于jQuery的全选/全不选,点行也可选中或取消</dd><dd><span>2010-12-12</span><inputtype="checkbox"name="jqitems"value=""/>基于jQuery的全选/全不选,点行也可选中或取消</dd><dd><span>2010-12-12</span><inputtype="checkbox"name="jqitems"value=""/>基于jQuery的全选/全不选,点行也可选中或取消</dd><dt><labelfor="jq_chk_1"><inputtype="checkbox"id="jq_chk_1"name="chk_can"value=""/>全选/全不选</label></dt></dl></form>

jquery核心实现代码

//jQ实现全选全不选$(function(){var_jq_chk=$('#jq>dl>dt>label>:checkbox');var_jqitems=$(':checkbox[name=jqitems]');var_rows=$('#jq>dl>dd');//全选与全不选一体实现_jq_***.click(function(){//列表中选框和全选选框统一状态_jqitems.add(_jq_chk).attr('checked',this.checked);});//选框的点击事件_***.click(function(e){//阻止冒泡,避免行点击事件中,直接选择选框无效e.stopPropagation();//判断选中个数与实际个数是否相同,以确定全选/全不选状态_jq_chk.attr('checked',_jqitems.size()==_jqitems.filter(':checked').size());});//点选行时选中行内的checkbox_rows.bind({mouseenter:function(){$(this).addClass('hover');},mousele**e:function(){$(this).removeClass('hover');},//点选click:function(){//行内点击时,行内的选框状态为原状态取反$(this).find(':checkbox').attr('checked',!$(this).find(':checkbox').get(0).checked)//判断选中个数与实际个数是否相同,以确定全选/全不选状态_jq_chk.attr('checked',_jqitems.size()==_jqitems.filter(':checked').size());}});});

这个代码比普通的实现代码要多不少，主要表现为点击行就可以实现选择功能。更多的功能更多的代码。大家可以根据需要自行删减。

相信很多做web的人都会遇到一些JS问题，那到底是用JQ来实现还是用JS来实现，常常困扰着我们，但其实JS是通用的，而JQ是建在自己加载的JQ库的，所在真正实现是没有任何区别的。