CHECKBOX 的全选、取消及跨页保存的实现方法

 更新时间:2013年10月16日 17:32:59   作者:  
CHECKBOX的操作在页面中很常见,比如全选、取消、跨页保存等等,下面有个不错的示例,大家可以尝试操作下
复制代码 代码如下:

<script>
$(document).ready(function () {
/**
*全选checkbox
*/
$(".checkall").live("click", function () {
if ($(this).attr("checked") == "checked") {//如果选中
CheckAll();
} else {
UnCheckAll();
}
UpdateHfValues();
});

$(".checkone").each(function () {
$(this).live("click", function () {
CheckOne();
UpdateHfValues();
});
});

function UnCheckAll() {
//取消全选
$(".checkone").each(function () {
$(this).removeAttr("checked");
});
}

function CheckAll() {
//全选
$(".checkone").each(function () {
$(this).attr("checked", "checked");
});
}

function CheckOne() {
//单击单条消息时检验是否全选
var $length = $(".checkone").length;
var $checklenght = $(".checkone:checked").length;
if ($length == $checklenght) {
$(".checkall").attr("checked", "checked");
} else {
$(".checkall").removeAttr("checked");
}
}
var arr = $("#hfDel").val().split(",");
$(".checkone").each(function () {
var i = 0;
for (i = 0; i < arr.length; i++) {
if (arr[i] == $(this).val()) {
$(this).attr("checked", "checked");
}
}
});
var checkedNum = $(".checkone:checked").length;
var allNum = $(".checkone").length;
if (checkedNum == allNum) {
$(".checkall").attr("checked", "checked");
}

function UpdateHfValues() {
var $checkOneLen = $(".checkone:checked").length;
var $conVal = "";
$(".checkone:checked").each(function (i) {
$conVal += $(this).val() + ",";
});
if ($conVal.length > 0) {
$conVal = $conVal.substring(0, $conVal.length - 1);
}
$conVal = $conVal + "," + $("#hfDel").val();

var allArray = $conVal.split(",");
$(".checkone").each(function () {
if (typeof $(this).attr("checked") != "undefined" && $(this).attr("checked") == "checked") {
var i = 0;
var find = false;
for (i = 0; i < allArray.length; i++) {
if (allArray[i] == $(this).val()) {
find = true;
}
}
if (find == false) {
allArray.push($(this).val());
}
}
else {
var i = 0;
for (i = 0; i < allArray.length; i++) {
if (allArray[i] == $(this).val()) {
allArray[i] = "";
}
}
}
});

var i = 0;
var result = "";
for (i = 0; i < allArray.length; i++) {
if (allArray[i] != "") {
result += allArray[i] + ",";
}
}
if (result.length > 0) {
result = result.substring(0, result.length - 1);
}

$("#hfDel").val(result);
}

function UpdateValues() {
alert($("#hfDel").val());
var $checkOneLen = $(".checkone:checked").length;
var $conVal = "";

$(".checkone:checked").each(function (i) {
$conVal += $(this).val() + ",";
});

$conVal = $conVal.substring(0, $conVal.length - 1);

$("#hfDel").val($conVal);
}

$("#btnDeletes").unbind("click").live("click", function () {
if ($("#hfDel").val() != "") {
if (confirm("确定要启用用选中的选项吗?")) {
return true;
} else {
return false;
}
} else {
alert("您尚未选中要启用的选项!");
return false;
}
});

$("#lbTingYong").unbind("click").live("click", function () {
if ($("#hfDel").val() != "") {
if (confirm("确定要停用选中的选项吗?")) {
return true;
} else {
return false;
}
} else {
alert("您尚未选中要停用的选项!");
return false;
}
});
});

<script>
<input type="checkbox" id="ckAll" class="checkall" onclick="checkAll(this)" /></div>
<input type="checkbox" id="iCheck" class="checkone" value='<%#Eval("cSubjectDetailID") %>' />
<asp:HiddenField ID="hfDel" runat="server" />

相关文章

  • .NET单元测试使用AutoFixture按需填充的几种方式和最佳实践记录

    .NET单元测试使用AutoFixture按需填充的几种方式和最佳实践记录

    AutoFixture是一个.NET库,旨在简化单元测试中的数据设置过程,通过自动生成测试数据,它帮助开发者减少测试代码的编写量,使得单元测试更加简洁、易读和易维护,本文介绍.NET单元测试使用AutoFixture按需填充的几种方式和最佳实践记录,感兴趣的朋友一起看看吧
    2024-07-07
  • asp.net生成缩略图示例方法分享

    asp.net生成缩略图示例方法分享

    asp.net快速生成清晰缩略图,大家参考使用吧
    2013-12-12
  • Entity Framework Core实现Like查询详解

    Entity Framework Core实现Like查询详解

    本文详细讲解了Entity Framework Core实现Like查询的方法,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-02-02
  • .NET 6开发TodoList应用之实现API版本控制

    .NET 6开发TodoList应用之实现API版本控制

    API接口版本管理,对于一些规模稍大的企业应用来说,是经常需要关注的一大需求。本文将介绍在.NET 6开发中如何实现API版本控制,感兴趣的可以了解一下
    2022-01-01
  • VS2015+Qt5+OpenCV3开发环境配置

    VS2015+Qt5+OpenCV3开发环境配置

    这篇文章主要为大家详细介绍了VS2015+Qt5+OpenCV3开发环境配置,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-06-06
  • ASP.NET Core SignalR中的流式传输深入讲解

    ASP.NET Core SignalR中的流式传输深入讲解

    这篇文章主要给大家介绍了关于ASP.NET Core SignalR中流式传输的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2018-11-11
  • asp.net 弹出对话框返回多个值

    asp.net 弹出对话框返回多个值

    这是我写的第一篇文章,呵呵。所以写的详细希望能帮到某些兄弟。前段时间做过一个项目。需要用到选择对话框。当单击选择按钮时要弹出一个网页包含GridView。当单击选择时返回GridView中单元格的值。
    2009-11-11
  • 微信语音上传 下载功能实例代码

    微信语音上传 下载功能实例代码

    这篇文章主要介绍了微信语音上传 下载功能实例代码,需要的朋友可以参考下
    2017-08-08
  • System.Timers.Timer定时执行程序示例代码

    System.Timers.Timer定时执行程序示例代码

    如果是某个逻辑功能的定时,可以将code放到逻辑功能的类的静态构造函数中,在该逻辑类第一次执行时,静态构造函数会被调用,则定时自然启动
    2013-06-06
  • Automation服务器不能创建对象的多种解决办法

    Automation服务器不能创建对象的多种解决办法

    这篇文章主要介绍了Automation服务器不能创建对象的多种解决办法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-01-01

最新评论