服务器之家:专注于服务器技术及软件下载分享
分类导航

PHP教程|ASP.NET教程|JAVA教程|ASP教程|

服务器之家 - 编程语言 - ASP.NET教程 - CHECKBOX 的全选、取消及跨页保存的实现方法

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

2019-11-19 13:43asp.net教程网 ASP.NET教程

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" /> 

延伸 · 阅读

精彩推荐