您的位置：首页 > 编程语言

简单使用JQ代码 实现全选 反选 全不选 批删

2017-01-03 16:39 288 查看 
<html><table class="table">
    <tr>
        <td>选择</td>
        <td>ID</td>
        <td>NAME</td>
        <td>SEX</td>
        <td>AGE</td>
        <td>TEL</td>
        <td>操作</td>
        <td>查看</td>
    </tr>

    <tbody class="tbo1">
    <?php foreach($data as $key=>$val):?>
    <tr>
        <td><input type="checkbox" value="<?=$val['s_id']?>" class="c_box"></td>
        <td><?=$val['s_id']?></td>
        <td><?=$val['s_name']?></td>
        <td><?=$val['s_sex']?></td>
        <td><?=$val['s_age']?></td>
        <td><?=$val['s_tel']?></td>
        <td><a href="">操作</a></td>
        <td><a href="?r=students/select&s_id=<?=$val['s_id']?>">查看</a></td>
    </tr>
    <?php endforeach;?>
    </tbody>
</table>
<button class="all">全选</button>
<button class="nall">反选</button>
<button class="no_all">取消</button>
<button class="delete">删除</button>

</html>

JQ代码``````````````````````````````````````````````
//反选
$(document).delegate('.doAll','click',function () {
    $('.cbox').each(function () {
        $(this).prop('checked',!$(this).prop('checked'));
    })
})

//全选$(document).delegate('.onAll','click',function () {
    $('.cbox').each(function () {
        $(this).prop('checked',true);
    })})
//全不选
$(document).delegate('.noAll','click',function () {
    $('.cbox').each(function () {
        $(this).prop('checked',false);
    })
})

//批删
$(document).delegate('.delAll','click',function () {
    $('.cbox').each(function () {
        if ($(this).prop('checked')){
            _ids = $(this).val();
            del(_ids,$(this))
        }
    })

})
function del(ids,obj) {
    $.post('?r=students/getdel',{ids:ids},function (success) {
        if (success == 1){
            obj.parents('tr').remove();
        }else {
            alert('删除失败')
        }
    })}
//单删
$('.oneDel').click(function () {
        _id = $(this).attr('id')
        del(_id,$(this))
})
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                jq
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                

                    
                

            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航