日期:2014-05-16  浏览次数:20308 次

表格SHIFT多选
本帖最后由 cj205 于 2013-10-01 06:50:52 编辑
我现在有一个自己做的控件由于checkbox太多我想实现按住Shift多选的效果,请高手解答。注:现在我创建的checkbox每个id不容易获取。

------解决方案--------------------


<table  id="tb1" width="100%" cellpadding="0" cellspacing="0" border="1">
   <tr><td>aaa</td><td>bbb</td><td>ccc</td><td>ddd</td></tr>
</table>
<script>
var tb=document.getElementById('tb1');
function add(rowCount){
 var rs=tb.rows,ii=0,cs=tb.rows[0].cells.length;
 for(var i=0;i<rowCount;i++){
    var r=tb.insertRow(-1);
  for(var j=0;j<cs;j++){
  r.insertCell(-1).appendChild( cEl('input',{type:'checkbox', i:ii,value:ii,id: 'ch'+ ii++  }  )  );
  }
 }
}
function cEl(tag,attrs){
var el=document.createElement(tag);
for(var k in attrs) el[k]=attrs[k]
  return el
}
add(10);//生成测试数据 
/////////////////////////////////////////
function getP(el,td){
while( el&& el.tagName!= td.toUpperCase()) el= el.parentNode;
return el;
}

var actCh,
chs=tb.getElementsByTagName('input');
tb.onclick=function(evt){
evt=window.event
------解决方案--------------------
evt;
var el=evt.srcElement
------解决方案--------------------
evt.target;
var ch=getP(el,'td').getElementsByTagName('input')[0];

if(actCh &&  evt.shiftKey ) selChs(ch)
 
  actCh&&(actCh.parentNode.bgColor='#ffffff');
  ch.parentNode.bgColor='#fafaff';
actCh=ch;

}
function selChs(ch){
  var cs=[actCh,ch].sort(function(a,b){ return a.i-b.i})
for(var i=cs[0].i;i<=cs[1].i;i++) chs[i].checked= !chs[i].checked;
}
</script>

------解决方案--------------------
这种想法很有创意,但是无法实现,楼主可以换个思路,
放个【全选】按钮,在内部再进行自动选中就好了。
可以用行全选,或者列全选的方式
------解决方案--------------------
复选框不就是多选了么? id不容易获取!命名很重要!
------解决方案--------------------

function SelectRow(selectObj) {
    var row = $(selectObj).parent().parent(); // 找到TR
    var find = false;
    $(row).find(":checkbox").each(function() {
        if (find) {
            $(this).prop("checked", true);
        } else {
            // 通过值比较找到当前的选中框,并选中当前行当前选中框之后的选中框
         &nbs