CHECKBOX 的全選、取消及跨頁(yè)保存的實(shí)現(xiàn)方法
更新時(shí)間:2013年10月16日 17:32:59 作者:
CHECKBOX的操作在頁(yè)面中很常見(jiàn),比如全選、取消、跨頁(yè)保存等等,下面有個(gè)不錯(cuò)的示例,大家可以嘗試操作下
復(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() {
//單擊單條消息時(shí)檢驗(yàn)是否全選
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("確定要啟用用選中的選項(xiàng)嗎?")) {
return true;
} else {
return false;
}
} else {
alert("您尚未選中要啟用的選項(xiàng)!");
return false;
}
});
$("#lbTingYong").unbind("click").live("click", function () {
if ($("#hfDel").val() != "") {
if (confirm("確定要停用選中的選項(xiàng)嗎?")) {
return true;
} else {
return false;
}
} else {
alert("您尚未選中要停用的選項(xiàng)!");
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)文章
SqlCommandBuilder類批量更新excel或者CSV數(shù)據(jù)的方法
這篇文章主要介紹了SqlCommandBuilder類批量更新excel或者CSV數(shù)據(jù)的方法,需要的朋友可以參考下2015-10-10Visual Studio 2013如何使XML文件轉(zhuǎn)換成類
Visual Studio 2013如何使XML文件轉(zhuǎn)換成類?這篇文章主要介紹了Visual Studio2013輕松將你的XML文件轉(zhuǎn)換成類的方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-07-07.NET 刷新頁(yè)面防止表單二次提交的實(shí)現(xiàn)方法
頁(yè)面上按鈕是服務(wù)器控件,現(xiàn)在刷新頁(yè)面要防止按鈕事件重復(fù)執(zhí)行。這篇文章給大家?guī)?lái)了.net刷新頁(yè)面防止表單二次提交的實(shí)現(xiàn)方法,非常不錯(cuò),感興趣的朋友一起看看吧2016-09-09詳解.net core下如何簡(jiǎn)單構(gòu)建高可用服務(wù)集群
一說(shuō)到集群服務(wù)相信對(duì)普通開(kāi)發(fā)者來(lái)說(shuō)肯定想到很復(fù)雜的事情,這篇文章主要介紹了詳解.net core下如何簡(jiǎn)單構(gòu)建高可用服務(wù)集群,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-01-01理解ASP.NET Core 中間件(Middleware)
這篇文章主要介紹了ASP.NET Core 中間件(Middleware),中間件是一種裝配到應(yīng)用管道以處理請(qǐng)求和響應(yīng)的軟件。文中講解相關(guān)知識(shí)非常詳細(xì),感興趣的朋友可以一起來(lái)看一看2021-09-09asp.net實(shí)現(xiàn)微信公眾賬號(hào)接口開(kāi)發(fā)教程
這篇文章主要是一篇關(guān)于asp.net實(shí)現(xiàn)微信公眾賬號(hào)接口開(kāi)發(fā)教程,感興趣的小伙伴們可以參考一下2015-12-12