//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库的，所在真正实现是没有任何区别的。
您可能感兴趣的文章: