Jquery table列表多选实现

$("#checkAll").bind("click", function () {
        debugger;
        if (this.checked) {
            $("[name = checkItem]:checkbox").attr("checked", true);
        }
        else {
            $("[name = checkItem]:checkbox").attr("checked", false);
        }
    });

<table class="table table-striped table-hover table-condensed">
        <thead>
            <tr>
                <th><input id="checkAll" type="checkbox" /></th>
                <th>订单编号</th>
                <th>客户代码</th>
                <th>客户名称</th>
                <th>下单日期</th>
                <th>运单号</th>
                <th>电商平台名称</th>
                <th>批次号</th>
                <th>编辑</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var item in Model)
            {
                <tr>
                    <td><input id="@item.Id" name="checkItem" type="checkbox" /></td>
                    <td>@Ajax.ActionLink(item.OrderNo, "Details", new { item.Id }, new AjaxOptions { UpdateTargetId = "Main" })</td>
                    <td>@Html.DisplayFor(a => item.CustomCode)</td>
                    <td>@Html.DisplayFor(a => item.CustomName)</td>
                    <td>@Html.DisplayFor(a => item.CreateDate)</td>
                    <td>@Html.DisplayFor(a => item.WaybillNo)</td>
                    <td>@Html.DisplayFor(a => item.PlatName)</td>
                    <td>@Html.DisplayFor(a => item.BatchNo)</td>
                    <td>
                        @Ajax.ActionLink("编辑", "Edit", null, new { id = item.Id }, new AjaxOptions { UpdateTargetId = "Main" }, new { @class = "" })
                        <span>&nbsp;</span>
                        @Ajax.ActionLink("删除", "Delete", null, new { id = item.Id }, new AjaxOptions { UpdateTargetId = "Main", HttpMethod = "Delete", Confirm = "您确定要删除该记录吗?该操作不可恢复!" }, new { @class = "" })
                    </td>
                </tr>
            }
        </tbody>
    </table>

时间: 2024-11-05 15:19:01

Jquery table列表多选实现的相关文章

JQuery实现列表中复选框全选反选功能封装

JQuery实现列表中复选框全选反选功能封装 我们在做列表的时候经常会遇到全选,反选进行批量处理问题,例如: 我当时就是简单的实现了,然后想封装到公共的js中,封装的太烂,不好意思贴出来了(就是把实现代码之间放到公共js中,然后每个页面都用固定的id,class,现在想想我都不好意思叫他封装了),然后想到之前老大有写过这个功能去看下他怎么写的,真是没有对比就没有伤害啊,这才叫封装: 1 $(':checkbox[data-check-target]').click(function () { 2

Jquery获取列表中的值和input单选、多选框控制选中与取消

一.Jquery获取列表中的值 二.input多选框控制选中 1 $('#clearbtn').click(function(){ 2 var boxes = $("input[type='checkbox']"); 3 for(i=0;i<boxes.length;i++){ 4 boxes[i].checked = false; 5 } 6 });

jQuery实现的全选、反选和不选功能

适用于网页多选后需要进行批量操作的场景(如批量删除等).如有问题希望大家可以指正.谢谢~~ HTML 我们的页面上有一个歌曲列表,列出多行歌曲名称,并匹配复选框供用户选择,并且在列表下方有一排操作按钮 <ul id="list"> <li><label><input type="checkbox" value="1"> 1.时间都去哪儿了</label></li> <l

Kibana Table 面板多选字段解释

table 面板左侧,是字段列表多选区域,字段分为 _all 和 current 两种. _all 是 Kibana 通过elasticsearch 的 _mapping API 直接获取的索引内所有存在过的字段. current 则仅显示table 匹配范围内的数据用到的字段.

jQuery如何实现复选框全选和全不选

jQuery如何实现复选框全选和全不选: 在网页中经常有复选框的全选和全不选效果,比如在后台新闻管理.用户空间信息管理等都有用到,下面就提供一个jQuery实现的此效果.代码实例如下: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name=&quo

jquery.Table实现的翻页功能比较完整漂亮,本想扩展个模版DIV

jquery.dataTable实现的翻页功能比较完整漂亮,本想提取其的翻页部分,再结合模版DIV,bootstrop实现聊天记息的展示. jquery.Table 与table结合的较紧,不能在很下提取完成. 看了近一天的源码后,对API的结构,实现方式和思路有了基本的认识,但终因工作量太大放弃了提取的念头,时间所迫转用KenDo的翻页 不过这过程中,对其的API实现有了较深的认识. 这里摘录部分资料 以下是在进行dataTable绑定处理时候可以附加的参数: 属性名称 取值范围 解释 bAu

jQuery_review之jQuery实现左右多选内容交换

在HTML中,通过Select设置multiple="multiple"设置当前的框为多选框,也就意味着可以同时选择多个内容.在我们的系统中经常可以看到左右两侧的选择,甚至在腾讯的应用中,都有很多类似的功能实现.这种功能是非常实用的,就可以将它封装为一个标签,然后设置两个LIST进行内容的互换,这些对于项目组的快速开发是非常有帮助的,因为JSP的功能就是在于丰富的可以扩展的标签,难道不是么? 在这个小的复习里面,一个简单的要注意的点就是,对于下拉选单的内容的筛选,是通过:selecte

jquery点击复选框触发事件给input赋值

体验效果:http://keleyi.com/keleyi/phtml/jqtexiao/31.htm 代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jquery点击复选框触发事件给input赋值-柯乐义</title><base target="_blank" /> <sty

基于bootstrap的jQuery多级列表树插件

http://www.cnblogs.com/mfc-itblog/p/5233453.html http://www.htmleaf.com/jQuery/Menu-Navigation/201502141379.html http://www.htmleaf.com/Demo/201502141380.html 简要教程 bootstrap-treeview是一款效果非常酷的基于bootstrap的jQuery多级列表树插件.该jQuery插件基于Twitter Bootstrap,以简单和