zoukankan      html  css  js  c++  java
  • jquery全选反选复选框+批量删除

      <li id="all_del"><span><img src="__ADMIN__/images/t03.png" /></span>删除</li>
    
            <table class="tablelist">
                <thead>
                    <tr>
                        <th>
                            <input  type="checkbox" value=""  id="checkAll" />
                        </th>
                        <th>商品id</th>
                        <th>商品名称</th>
                        <th>缩略图</th>
                        <th>商品价格</th>
                        <th>库存</th>
                        <th>上架时间</th>
                        <th>添加时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    {volist name="goods_list" id="val"}
                    <tr>
                        <td>
                            <input name="checkbox_name" type="checkbox" value="{$val.goods_id}" />
                        </td>
                        <td>{$val.goods_id}</td>
                        <td>{$val.goods_name}</td>
                        <td><img src="{$val.goods_small_logo|ltrim=###,'.'}"></td>
                        <td>{$val.goods_price}</td>
                        <td>{$val.goods_number}</td>
                        <td>{$val.goods_weight}</td>
                        <td>{$val.add_time|date='Y-m-d',###}</td>
                        <td><a href="photos/goods_id/{$val.goods_id}" >查看</a>
                             <a class='del' href="{:Url('del',array('goods_id'=>$val['goods_id']))}"> 删除</a>    
                             <a href="edit/goods_id/{$val.goods_id}">编辑</a>
                        </td>
                    </tr>
                    {/volist}
                </tbody>
            </table>
        <script type="text/javascript">
            $('.tablelist tbody tr:odd').addClass('odd');
            //删除前提醒
            $('.del').click(function(){
                if(confirm('确定要删除吗?')){
                    return true;
                }else{
                    return false;
                }
            });
            //复选框
            $('#checkAll').click(function(){
               if($(this).attr('checked')){
                    $("input[name='checkbox_name']").each(function(){
                        $(this).attr("checked",true);
                    });
               }else{
                    $("input[name='checkbox_name']").each(function(){
                        $(this).attr("checked",false);
                    });
               }
            });
            //批量删除
            $('#all_del').click(function(){
               var list=$(':checkbox:checked');
               var ids="";
                list.each(function(){
                    ids += $(this).val()+',';
                });
                if(ids.length==0){
                    alert('请选择要删除的商品');
                }else{
                    //截取最后一个
                    ids=ids.substr(0,ids.length-1);
                    if(confirm('确定要删除吗?')){
                        location.href="dels/goods_id/"+ids;
                    }else{
                        return false;
                    }  
                }
             
            });
    
        </script>

     

  • 相关阅读:
    用jQuery开发插件详解
    position:absolute和float会隐式的改变display类型
    链家H5项目总结
    jQuery中的选择器
    jqeury实现全选和反选
    $.extend(),与$.fn.extend() 讲解(一)
    mybatis用distinct进行查询的问题
    mybatis 动态Sql的模糊查询
    mysql
    @RequestParam和@PathVariable的区别
  • 原文地址:https://www.cnblogs.com/mengor/p/7999026.html
Copyright © 2011-2022 走看看