`

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

 
阅读更多
CHECKBOX的操作在页面中很常见,比如全选、取消、跨页保存等等,下面有个不错的示例,大家可以尝试操作下
代码:
<script> 
$(document).ready(function () { 
/** 
*全选checkbox 
*by www.jbxue.com 脚本学堂
*/ 
$(".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" /> 
分享到:
评论

相关推荐

    PHP checkbox全选及提交到PHP

    这个项目("PHP checkbox全选及提交到PHP")涵盖了前端的全选功能实现,后端的PHP接收表单数据,以及可能涉及的数据库操作。了解这些知识点有助于构建一个完整的用户交互系统,允许用户在网页上选择多个选项并将其...

    CheckBox实现多选、全选、反选功能

    本教程将深入探讨如何使用CheckBox实现多选、全选和反选功能,这对于构建具有选择列表的应用非常关键。 首先,我们从基础开始。CheckBox的用法很简单,通常在XML布局文件中定义: ```xml &lt;CheckBox android:id="@...

    C# grid checkbox 全选

    在描述中提到的“C# grid checkbox 全选”是指在C#中使用数据网格(通常为DataGridView或DevExpress的GridView)控件时,实现表头复选框全选功能的技术。这个功能常见于数据管理界面,允许用户一键选择或取消选择...

    Bootstrap Table 跨页选择

    在“Bootstrap Table 跨页选择”这个主题中,我们主要关注的是如何在实现后台分页的表格中实现用户在不同页面选择行的功能,并能持久保存和恢复这些选择。 在传统的Bootstrap Table中,用户可能只能在当前页面进行...

    Java中checkbox实现跨页多选的方法

    在Java Web开发中,实现checkbox跨页多选功能是一项常见的需求,特别是在数据量大、需要分页展示的情况下。这个功能允许用户在多个页面上选择不同的选项,并在提交时能够保存所有选择,无论这些选项分布在多少个页面...

    带CheckBox的listView 支持多选,全选,反选

    在许多场景下,我们需要在ListView中加入复选框(CheckBox),实现多选、全选和反选的功能,例如在选择联系人、设置菜单等场景。这个“带CheckBox的listView”项目就是为了解决这类需求而设计的,并且已经解决了常见...

    C#_winform_GridView_CheckBox_多选_全选

    "C#_winform_GridView_CheckBox_多选_全选"这个主题就专门探讨了如何在WinForm的GridView中实现复选框的多选和全选功能。 首先,我们需要理解GridView的基本用法。GridView是.NET Framework中的System.Windows....

    GridView js实现全选 (分页保持选择状态)

    1. 使用JavaScript操作DOM,实现全选/取消全选功能。 2. 使用数据结构(如JavaScript对象或数组)存储各分页的选中状态。 3. 在分页切换时,根据存储的数据恢复和更新选中状态。 通过这些步骤,我们可以创建一个...

    ListView CheckBox

    - 实现全选和取消全选功能,通常会添加一个主CheckBox,当它被选中时,所有ListView中的CheckBox都应被选中;反之,所有CheckBox取消选中。 - 当主CheckBox的状态改变时,遍历数据源,更新布尔数组,然后调用`...

    全选和复选,并把结果保存到数据库

    根据提供的文件信息,本文将详细解析“全选和复选,并把结果保存到数据库”的实现原理及技术要点。本文档中的代码片段展示了如何在JSP页面中实现全选与复选功能,并通过JavaScript来控制各个复选框的状态,最终目的...

    QTableWidget表头添加复选框实现全选功能

    有时候,我们希望在表格的表头中添加复选框,以便实现全选或取消全选的功能,这在处理大量数据时尤其有用。本篇文章将详细解释如何在`QTableWidget`的表头中添加复选框并实现全选功能。 首先,我们需要了解`...

    Android checkbox的listView(多选,全选,反选)具体实现方法

    然而,当需要在ListView中集成CheckBox以便实现多选、全选和反选功能时,开发者往往会遇到一些挑战,因为ListView的复用机制可能导致CheckBox的状态无法正确保存。本文将详细介绍如何在Android中实现一个带有...

    实现listview 单选 多选 反选 全选功能

    实现ListView的单选、多选、反选以及全选功能是常见的需求,尤其是在需要用户进行多项选择的场景下。下面将详细介绍如何实现这些功能。 首先,我们需要一个适配器(Adapter)来填充ListView的数据。适配器通常继承...

    js实现全选的复选框

    1. 反向全选:有时,用户可能希望取消已选中的所有复选框,这可以通过添加一个反向全选的功能实现。只需在全选复选框的事件处理函数中添加一句`this.checked = !this.checked`,即可实现全选/反选切换。 2. 交互...

    仿58同城android listview中的全选、取消、反选、删除、编辑、完成多种操作

    本项目"仿58同城android listview中的全选、取消、反选、删除、编辑、完成多种操作"旨在实现与58同城旧版类似的交互功能,提供了一个完整的示例,帮助开发者了解如何在ListView中集成多种操作。 首先,ListView的...

    ListView全选删除

    本教程将详细讲解如何实现ListView中的全选删除功能,结合checkBox(复选框)进行多条记录的选择与批量删除。 1. **ListView基础** - ListView是Android提供的一个可滚动视图,常用于展示大量数据,如联系人列表或...

    Android-ListView:该Demo实现了ListView嵌套ListView并还有CheckBox全选反选单选的实现

    本示例"Android-ListView"专注于在ListView中嵌套另一个ListView,并且添加了CheckBox功能,支持全选、反选以及单选操作,这在实现类似淘宝购物车功能时非常常见。以下是关于这个Demo的详细知识点: 1. **ListView...

    TreeView CheckBoxes 全选与反选

    实现全选功能,我们需要一个顶级节点(通常是TreeView的根节点)的CheckBox,当用户点击这个CheckBox时,所有的子节点都应该被选中。可以通过递归调用来实现这一点,如下: ```csharp private void ...

Global site tag (gtag.js) - Google Analytics