jquery+DOM实现表格拖选，使checkbox选中

来源：互联网发布：Js补全http 编辑：程序博客网时间：2024/06/05 03:38

<!DOCTYPE html>
<html>
    <head>
        <title>jquery+DOM实现表格拖选，使checkbox选中</title>
        <script src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js"></script>
    </head>
   <body>
         <table>
             <tr rel="1"><td><input name="x1" type="checkbox"></td><td>xxx</td><td>yyyy</td><td>zzzz</td></tr>
            <tr rel="2"><td><input name="x2" type="checkbox"></td><td>xxx</td><td>yyyy</td><td>zzzz</td></tr>
            <tr rel="3"><td><input name="x3" type="checkbox"></td><td>xxx</td><td>yyyy</td><td>zzzz</td></tr>
            <tr rel="4"><td><input name="x4" type="checkbox"></td><td>xxx</td><td>yyyy</td><td>zzzz</td></tr>
            <tr rel="5"><td><input name="x5" type="checkbox"></td><td>xxx</td><td>yyyy</td><td>zzzz</td></tr>
            <tr rel="6"><td><input name="x6" type="checkbox"></td><td>xxx</td><td>yyyy</td><td>zzzz</td></tr>
        <table>
       <script type="text/javascript">
           $(function(){
           var selected = [];
           $('table tr').mousedown(function(){
               selected = [];
               selected.push($(this).attr('rel'));
           })
           $('table tr').mouseover(function(){
           if( selected ){
               selected.push($(this).attr('rel'));
              }
           })
           $('table tr').mouseup(function(){
               for(var i in selected){
                   console.log(selected[i]+"::"+$("tr[rel="+selected[i]+"] input").get(0).checked);
                   //console.log(selected[i]+"::"+$("tr[rel="+selected[i]+"] input").attr('checked'));
                   if( $("tr[rel="+selected[i]+"] input").get(0).checked ){
                       $("tr[rel="+selected[i]+"] input").get(0).checked=false;
                       //$("tr[rel="+selected[i]+"] input").removeAttr('checked');
                   }else{
                       $("tr[rel="+selected[i]+"] input").get(0).checked=true;
                       //$("tr[rel="+selected[i]+"] input").attr('checked', 'checked');
                   }
               }
           })
           });
       </script>
   </body>
</html>

注释为无效实现方式，多次操作属性改变，但多选框未选中

该效果待完善。。。

0 0