日常项目中, 对于列表类文章或数据, 大概都会用到checkbox的全选或全不选的功能, 以前的项目中也写过checkbox的选择js, 但都没有整理过. 正好前几天一个兄弟遇到了这个问题, 索性, 我花了点时间, 用原生JS与jQuery分别写了一个版本, 考虑到使用时灵活性问题, 未封装, 需要的童鞋使用时自行改下相关参数.
功能介绍点此查看DEMO演示
1. 全选/全不选 选框一体实现, 即列表中选框的状态与全选/全不选框前的选框状态一致;
2. 自动更改 全选/全不选 选框的状态, 即列表中选框都选中时, 全选/全不选 选框也选中, 反之亦然;
3. 列表行内点击也可选中行内的checkbox, 并与1,2中的功能联动.
另,本文重在写全选, 鼠标划入划出背景变色为简易实现, 更加完善的请参考:
https://www.jb51.net/article/24125.htm
原生JS版本核心代码
html代码
<form id="js" name="js" action="#"> <h5>原生JS样例</h5> <dl> <dt><label for="js_chk_0"><input type="checkbox" id="js_chk_0" name="chk_can" value="" />全选/全不选</label></dt> <dd><span>2010-12-12</span><input type="checkbox" name="jsitems" value="" />原生JS实现的全选/全不选,点行也可选中或取消</dd> <dd><span>2010-12-12</span><input type="checkbox" name="jsitems" value="" />原生JS实现的全选/全不选,点行也可选中或取消</dd> <dd><span>2010-12-12</span><input type="checkbox" name="jsitems" value="" />原生JS实现的全选/全不选,点行也可选中或取消</dd> <dd><span>2010-12-12</span><input type="checkbox" name="jsitems" value="" />原生JS实现的全选/全不选,点行也可选中或取消</dd> <dd><span>2010-12-12</span><input type="checkbox" name="jsitems" value="" />原生JS实现的全选/全不选,点行也可选中或取消</dd> <dt><label for="js_chk_1"><input type="checkbox" id="js_chk_1" name="chk_can" value="" />全选/全不选</label></dt> </dl> </form>
原生js代码
//原生JS实现全选全不选类 window.onload = function iCheckAll(){ var js_chk = document.forms['js'].chk_can; var jsitems = document.forms['js'].jsitems; var jsrows = document.getElementById('js').getElementsByTagName('dd'); //判断选中个数与实际选框个数实现全选/全不选框的状态 var chk_canle = function(){ var checkedLen = 0; //计算列表中选中状态的选框个数 for (var m = 0; m < jsitems.length; m++) { if (jsitems[m].checked) { checkedLen += 1; } } //判断选中个数与实际个数是否相同,以确定全选/全不选状态 for (var m = 0; m < js_chk.length; m++) { js_chk[m].checked = (jsitems.length == checkedLen); } } //全选与全不选一体实现 for (var i = 0; i < js_chk.length; i++) { js_chk[i].onclick = function(){ //列表中选框与全选选框统一状态 for (var m = 0; m < jsitems.length; m++) { jsitems[m].checked = this.checked; } //全选选框统一状态 for (var m = 0; m < js_chk.length; m++) { js_chk[m].checked = this.checked; } } } //列表中选框点击 for (var i = 0; i < jsitems.length; i++) { jsitems[i].onclick = function(e){ //阻止冒泡,避免行点击事件中,直接选择选框无效 e && e.stopPropagation "htmlcode"><form id="jq" name="jq" action="#"> <h5>jQuery样例</h5> <dl> <dt><label for="jq_chk_0"><input type="checkbox" id="jq_chk_0" name="chk_can" value="" />全选/全不选</label></dt> <dd><span>2010-12-12</span><input type="checkbox" name="jqitems" value="" />基于jQuery的全选/全不选,点行也可选中或取消</dd> <dd><span>2010-12-12</span><input type="checkbox" name="jqitems" value="" />基于jQuery的全选/全不选,点行也可选中或取消</dd> <dd><span>2010-12-12</span><input type="checkbox" name="jqitems" value="" />基于jQuery的全选/全不选,点行也可选中或取消</dd> <dd><span>2010-12-12</span><input type="checkbox" name="jqitems" value="" />基于jQuery的全选/全不选,点行也可选中或取消</dd> <dd><span>2010-12-12</span><input type="checkbox" name="jqitems" value="" />基于jQuery的全选/全不选,点行也可选中或取消</dd> <dt><label for="jq_chk_1"><input type="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_chk.click(function(){ //列表中选框和全选选框统一状态 _jqitems.add(_jq_chk).attr('checked', this.checked); }); //选框的点击事件 _jqitems.click(function(e){ //阻止冒泡,避免行点击事件中,直接选择选框无效 e.stopPropagation(); //判断选中个数与实际个数是否相同,以确定全选/全不选状态 _jq_chk.attr('checked', _jqitems.size() == _jqitems.filter(':checked').size()); }); //点选行时选中行内的checkbox _rows.bind({ mouseenter: function(){ $(this).addClass('hover'); }, mouseleave: 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库的,所在真正实现是没有任何区别的。
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。
更新日志
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]