`

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" /> 
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics