CHECKBOX 的全選、取消及跨頁保存的實現(xiàn)方法
更新時間:2013年10月16日 17:32:59 作者:
CHECKBOX的操作在頁面中很常見,比如全選、取消、跨頁保存等等,下面有個不錯的示例,大家可以嘗試操作下
復(fù)制代碼 代碼如下:
<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" />
相關(guān)文章
.NET單元測試使用AutoFixture按需填充的幾種方式和最佳實踐記錄
AutoFixture是一個.NET庫,旨在簡化單元測試中的數(shù)據(jù)設(shè)置過程,通過自動生成測試數(shù)據(jù),它幫助開發(fā)者減少測試代碼的編寫量,使得單元測試更加簡潔、易讀和易維護(hù),本文介紹.NET單元測試使用AutoFixture按需填充的幾種方式和最佳實踐記錄,感興趣的朋友一起看看吧2024-07-07
Entity?Framework?Core實現(xiàn)Like查詢詳解
本文詳細(xì)講解了Entity?Framework?Core實現(xiàn)Like查詢的方法,文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-02-02
.NET 6開發(fā)TodoList應(yīng)用之實現(xiàn)API版本控制
API接口版本管理,對于一些規(guī)模稍大的企業(yè)應(yīng)用來說,是經(jīng)常需要關(guān)注的一大需求。本文將介紹在.NET 6開發(fā)中如何實現(xiàn)API版本控制,感興趣的可以了解一下2022-01-01
VS2015+Qt5+OpenCV3開發(fā)環(huán)境配置
這篇文章主要為大家詳細(xì)介紹了VS2015+Qt5+OpenCV3開發(fā)環(huán)境配置,具有一定的參考價值,感興趣的小伙伴們可以參考一下2019-06-06
ASP.NET Core SignalR中的流式傳輸深入講解
這篇文章主要給大家介紹了關(guān)于ASP.NET Core SignalR中流式傳輸?shù)南嚓P(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-11-11
System.Timers.Timer定時執(zhí)行程序示例代碼
如果是某個邏輯功能的定時,可以將code放到邏輯功能的類的靜態(tài)構(gòu)造函數(shù)中,在該邏輯類第一次執(zhí)行時,靜態(tài)構(gòu)造函數(shù)會被調(diào)用,則定時自然啟動2013-06-06
Automation服務(wù)器不能創(chuàng)建對象的多種解決辦法
這篇文章主要介紹了Automation服務(wù)器不能創(chuàng)建對象的多種解決辦法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01

