当前位置：首页 → 问答吧 → 多选框Shift多项连续选择

多选框Shift多项连续选择

时间：2010-05-30

来源：互联网

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Continuous checkbox</title> <style type="text/css"> html,body,ul,li,a{ margin: 0 0; padding: 0 0; } body{ font-family: Microsoft YaHei; } h1{ font-size: 16px; text-align:center; } li{ list-style-type: none; } .checkbox_list{ width: 50%; margin: 0 auto; } .checkbox_list span.selAll{ color:#f00; line-height: 30px; display:block; } .checkbox_list ul{ margin-left: 1em; } .checkbox_list ul li{ line-height: 26px; border-bottom: 1px dotted #ccc; } .checkbox_list ul li.checked{ background-color:#fff99d; } .checkbox_list ul li a{ text-decoration: none; font-size: 12px; color: #524949; } .article_chk{ margin-right: 8px; } </style> <script type="text/javascript"> // base function function id(name) { return typeof name == 'object' ? name : document.getElementById(name); } function tag(elem,name) { // If the context element is not provided, search the whole document return (elem || document).getElementsByTagName(name); } function getParentNode( elem, num ){ num = num || 1; for ( var i = 0; i < num; i++ ){ if ( elem != null ) elem = elem.parentNode; } return elem; } function attr(elem, name, value) { // Make sure that a valid name was provided if ( !name || name.constructor != String ) return ''; // Figure out if the name is one of the weird naming cases name = { 'for': 'htmlFor', 'class': 'className' }[name] || name; // If the user is setting a value, also if ( value != null ) { // Set the quick way first elem[name] = value; // If we can, use setAttribute if ( elem.setAttribute ) elem.setAttribute(name,value); } // Return the value of the attribute return elem[name] || elem.getAttribute(name) || ''; } function hasClassName(elem,className){ if (!elem) return; var elementClassName = elem.className; return (elementClassName.length > 0 && (elementClassName == className || new RegExp("(^|\\s)" + className + "(\\s|$)").test(elementClassName))); } function addClassName(elem,className){ if (!elem) return; if (!hasClassName(elem,className)) elem.className += (elem.className ? ' ' : '') + className; } function removeClassName(elem,className){ if (!elem) return; elem.className = elem.className.replace(new RegExp("(^|\\s+)" + className + "(\\s+|$)"), ' '); } </script> <script type="text/javascript"> /* * @author: 邵盛强 * @email: [email protected] * @date: 2010-5-27 */ /* * 主题: 实现全选，反选，按住shift键实现多项连续选择. */ /* 功能需求： * 1、检查多选框是否被选中，如果有选中项，则所在行信息高亮显示 * 2、全选功能：若全选项被选中，则该列表的多选框全部选中，且所在行信息高亮显示 * 3、反选功能：全选状态下，选中该项，则全不选 * 若列表中既有选中的，又有没选中的，则执行相反选择 * 若列表中，没有选中项，则该按钮处于不可点击状态. * 4、若用户按住shift选择，则执行连续选择 */ /* * 需要注意的细节： * 1、设置一个变量isOne, * isOne == 0 全不选 * isOne == chks_len（多选框个数）全选 * 2、如果用户点击全选按钮：则手动设置:isOne = chks_len * 3、如果点击反选按钮，则手动设置 : isOne = 0 * 4、一般情况下：用户点击多选框，选中： isOne += 1,取消选中：isOne -= 1; * 选中时候要记得把反选按钮开启，以便用户可以进行反选，而且要判断isOne 是否等于chks_len,等于的话要把全选按钮checked = true;(选中) * 取消选中时也要判断isOne == 0，若是：则把反选按钮关闭，让用户只能用全选来选 */ function ShiftCheckboxFunction( formElement,selectAllEle,reselEle ){ //checkbox列表的容器表单 this.formEle = id(formElement); //全选按钮 this.selectAll = id(selectAllEle); //反选按钮 this.reverseOption = id(reselEle); this.checkboxs = tag(tag(this.formEle,'ul')[0],'input'); //表单个数 this.chks_len = this.checkboxs.length; } ShiftCheckboxFunction.prototype = { isOne: 0, lastClick: -1, init: function(){ var _self = this; //全选按钮激活 this.selectAll.disabled = false; //标记checkbox的v属性，使其序列号,便于寻址 this.each(function(i) { attr(_self.checkboxs[i],'v',i); if(_self.checkboxs[i].checked == true) _self.highLightLine(getParentNode(_self.checkboxs[i]),'checked'); },0,this.chks_len); //全选 this.selectAllFun(); //反选 this.reverseFun(); //单个选择 this.oneChkFun(); }, // 循环包装，f:是要批量执行的函数,s:开始，len:结束,这样设计主要是考虑到后面的按住shift选择时的区间性 each: function(fn,start,end){ var i = Math.min(start,end); while( i < Math.max(start,end)){ fn(i); i++; } }, //checkbox所在行即:li高亮 highLightLine: function(elem,highClassName) { addClassName(elem,highClassName); }, //取消高亮 removeHighLight: function(elem,highClassName) { removeClassName(elem,highClassName); }, // 全选按钮选中执行全选 selectAllFun: function() { var o = this.selectAll; var reo = this.reverseOption; var _self = this; o.onclick = function() { if(this.checked == true){ // 激活反选按钮 reo.disabled = false; reo.checked = false; _self.isOne = _self.chks_len; _self.each(function(i){ //选中 _self.checkboxs[i].checked = true; //高亮 _self.highLightLine(getParentNode(_self.checkboxs[i]),'checked');},0,_self.chks_len); } else { // 反选按钮不可选 reo.disabled = true; _self.isOne = 0; //实现反选（全不选） _self.allNoSelFun(); } } }, //全不选 allNoSelFun:function() { var _self = this; this.each(function(i) { _self.checkboxs[i].checked = false; _self.removeHighLight(getParentNode(_self.checkboxs[i]),'checked'); },0,_self.chks_len); }, reverseFun: function() { var _self = this; var reo = this.reverseOption; reo.onclick = function() { if(this.disabled == false ) { if(this.checked == true) { this.disabled = true; _self.selectAll.checked = false; } if(_self.isOne == _self.chks_len ){_self.allNoSelFun();return;} _self.each(function(i) { _self.reverseOption.disabled = false; if( _self.checkboxs[i].checked == false ) { _self.checkboxs[i].checked = true; _self.highLightLine(getParentNode(_self.checkboxs[i]),'checked'); } else { _self.checkboxs[i].checked = false; _self.removeHighLight(getParentNode(_self.checkboxs[i]),'checked'); } },0,_self.chks_len); } } }, oneChkFun: function() { var _self = this; var one = this.checkboxs; this.each(function(i) { one[i].onclick = function( e ){ e = e || window.event; if(e.shiftKey) { var currClick = parseInt(attr(this,'v')); var lc = _self.lastClick; // shift选中操作 if(one[lc].checked == true){ //_self.isOne += Math.abs(currClick - lc); _self.each(function(i){ if(one[i].checked == false ) _self.isOne += 1 ; one[i].checked = true; _self.highLightLine(getParentNode(one[i]),'checked'); },currClick,lc); // shift取消选中操作 } else { //_self.isOne -= Math.abs(currClick - lc); _self.each(function(i) { if(one[i].checked == true ) _self.isOne -= 1 ; one[i].checked = false; _self.removeHighLight(getParentNode(one[i]),'checked'); },currClick+1,lc); } } _self.lastClick = i; if (this.checked == true) { _self.isOne += 1; if (_self.isOne == _self.chks_len) _self.selectAll.checked = true; _self.reverseOption.disabled = false; _self.reverseOption.checked = false; _self.highLightLine(getParentNode(this), 'checked'); } else { _self.isOne -= 1; if (_self.isOne == 0) _self.reverseOption.disabled = true; if (_self.selectAll.checked == true) _self.selectAll.checked = false; _self.removeHighLight(getParentNode(this), 'checked'); } } },0,this.chks_len); } }; function start(){ var shiftObj = new ShiftCheckboxFunction('continuousForm','selectAll','reverseOption'); shiftObj.init(); } window.onload = start; </script> </head> <body> <h1>实现多选框的Shift连续选择</h1> <div class="checkbox_list" id="continuous"> <form action="" method="" id="continuousForm"> <fieldset> <legend>文章链接列表</legend> <span class="selAll"> <input type="checkbox" name="selectAll" id="selectAll" disabled="true" /><label for="selectAll">全选</label> <input type="checkbox" name="reverseOption" id="reverseOption" disabled="true" /><label for="reverseOption">反选</label> </span> <ul> <li><input type="checkbox" name="chk_file" class="article_chk" /><a href="#" title="">W3c新的web标准将在明年初起草</a></li> <li><input type="checkbox" name="chk_file" class="article_chk" /><a href="#" title="">没有甜言蜜语的爱情</a></li> <li><input type="checkbox" name="chk_file" class="article_chk" /><a href="#" title="">W3c新的web标准将在明年初起草</a></li> <li><input type="checkbox" name="chk_file" class="article_chk" /><a href="#" title="">W3c新的web标准将在明年初起草</a></li> <li><input type="checkbox" name="chk_file" class="article_chk" /><a href="#" title="">今夜我请你走进迷人的仙境</a></li> <li><input type="checkbox" name="chk_file" class="article_chk" /><a href="#" title="">W3c新的web标准将在明年初起草</a></li> <li><input type="checkbox" name="chk_file" class="article_chk" /><a href="#" title="">W3c新的web标准将在明年初起草</a></li> <li><input type="checkbox" name="chk_file" class="article_chk" /><a href="#" title="">今夜我请你走进迷人的仙境</a></li> <li><input type="checkbox" name="chk_file" class="article_chk" /><a href="#" title="">今夜我请你走进迷人的仙境</a></li> <li><input type="checkbox" name="chk_file" class="article_chk" /><a href="#" title="">W3c新的web标准将在明年初起草</a></li> <li><input type="checkbox" name="chk_file" class="article_chk" /><a href="#" title="">W3c新的web标准将在明年初起草</a></li> <li><input type="checkbox" name="chk_file" class="article_chk" /><a href="#" title="">没有甜言蜜语的爱情</a></li> <li><input type="checkbox" name="chk_file" class="article_chk" /><a href="#" title="">W3c新的web标准将在明年初起草</a></li> <li><input type="checkbox" name="chk_file" class="article_chk" /><a href="#" title="">你真的懂html吗</a></li> <li><input type="checkbox" name="chk_file" class="article_chk" /><a href="#" title="">W3c新的web标准将在明年初起草</a></li> </ul> </fieldset> </form> </div> </body> </html>
提示：您可以先修改部分代码再运行

source download: