zoukankan      html  css  js  c++  java
  • 引用js实现checkbox批量选中

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
      <title>checkbox全选</title>
      <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
      <style type="text/css"></style>
      <script type="text/javascript"></script>
     </head>
     <body>
       <table  style="border:1px solid red;">                               
                        <tr>
                            <th style="background-color:#f7f7f7;8%;text-align:center;" class="lf">
                                <input name='chkAll' type='checkbox' id='chkAll'  onClick="checkAll(this, 'id[]')" value='checkbox' />&nbsp;全选
                            </th>
                            <th style="background-color:#f7f7f7;8%;" class="lf">商品编号</th>
                            <th style="background-color:#f7f7f7;13%;" class="lf">名称</th>
                            <th style="background-color:#f7f7f7;18%;" class="lf">标题</th>            
                            <th style="background-color:#f7f7f7;8%;" class="lf">品牌</th>
                            <th style="background-color:#f7f7f7;8%;" class="lf">组别</th>        
                        </tr>
                        <tr>
                            <td class="lf" style="text-align:center;">
                            <input name='id[]' type='checkbox' value='{id}'  onClick="checkItem(this, 'chkAll')">
                            </td>
                            <td class="lf">001</td>
                            <td class="lf">002</td>
                            <td class="lf">003</td>
                            <td class="lf">004</td>
                            <td class="lf">005</td>         
                        </tr>   
                              <tr>
                            <td class="lf" style="text-align:center;">
                            <input name='id[]' type='checkbox' value='{id}'  onClick="checkItem(this, 'chkAll')">
                            </td>
                            <td class="lf">001</td>
                            <td class="lf">002</td>
                            <td class="lf">003</td>
                            <td class="lf">004</td>
                            <td class="lf">005</td>         
                        </tr> 
                        <tr height="45">
                            <td colspan="10" style="text-align:left;padding-left:40px;">
                                <input type="button" id="btn_show" value="批量展示" style="100px;margin-left:20px;">
                            </td>                
                        </tr>
                    </table>
    <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="checkbox.js"></script>
    <script type="text/javascript">
     /*var ids = [];
        $('#btn_show').click(function(){
            btnCheck('展示');
             data = {
                "ids":ids
            };
            $.ajax({
                type:"POST",
                url:"{:U('Mall/GoodsShow')}",
                data:data,
                //dataType:"json",
                success:function(msg){
                    if(msg == 00){
                        alert("批量展示成功");
                        window.location.href='/index.php/Admin/Mall/MallList';
                    }else{
                        alert("批量展示失败,请重新编辑");
                    }
                },
                error:function(){
                      alert("批量编辑失败,请重新编辑");
                 }
            });                  
        });
          function btnCheck(info){
            var obj = $("input[name='id[]']:checked").each(function(){
                ids.push($(this).val());
            });
            if (ids == false) {
                alert("请选定要"+info+"的商品");
                return false;
            }else {
                return ids; 
            }
        }
    */
    </script> </body> </html>
  • 相关阅读:
    ASP.NET Web API 框架研究 Self Host模式下的消息处理管道
    ASP.NET Web API 框架研究 Web Host模式下的消息处理管道
    ASP.NET Web API 框架研究 核心的消息处理管道
    ASP.NET Web API 框架研究 Web Host模式路由及将请求转出到消息处理管道
    ASP.NET Web API 框架研究 ASP.NET Web API 路由
    ASP.NET Web API 框架研究 ASP.NET 路由
    ASP.NET Web API 入门 (API接口、寄宿方式、HttpClient调用)
    MVVM模式
    RESTful Web API 理解
    C# 函数式编程及Monads.net库
  • 原文地址:https://www.cnblogs.com/yangzailu/p/6088488.html
Copyright © 2011-2022 走看看