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

(0)

相关推荐

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

    复制代码 代码如下: <script> $(document).ready(function () { /** *全选checkbox */ $(".checkall").live("click", function () { if ($(this).attr("checked") == "checked") {//如果选中 CheckAll(); } else { UnCheckAll(); } UpdateHf

  • checkbox全选/取消全选以及checkbox遍历jQuery实现代码

    复制代码 代码如下: <html> <head> <script src="jquery-1.3.2.min.js" type="text/javascript"></script> </head> <body> <input type="checkbox" name="chk_list" id="chk_list_1" valu

  • jQuery checkbox全选/取消全选实现代码

    jQuery版本:1.3.2 复制代码 代码如下: <html> <head> <script src="jquery-1.3.2.min.js" type="text/javascript"></script> </head> <body> <input type="checkbox" name="chk_list" id="chk_li

  • JQUERY CHECKBOX全选,取消全选,反选方法三

    jquery.checkboxes.zip,然后解压引用到使用插件的页面,这个不用多说了吧!下面看具体例子,为了让大家更好的理解,我直接把实现功能的代码贴出来: 复制代码 代码如下: $("#myform").toggleCheckboxes()//全选,取消全选,反选 $("#myform").toggleCheckboxes(":not(#checkbox1)")//全选,取消全选且不选中第一个,反选 $("#myform"

  • AngularJS 购物车全选/取消全选功能的实现方法

    刚学习angularJS,于是练习写了一个类似于购物车的全选/取消全选的功能,主要实现的功能有: 1.勾选全选checkbox,列表数据全部被勾选,取消同理,用ng-model实现双向绑定: 2.选中列表中的所有checkbox,全选也会被勾选:(这里我想到的方法是给每一个对象增加checked字段,然后勾选触发echoChange()函数,用了一个cc变量计算当前checked为true的个数,然后再判断被勾选个数与数组长度是否相等,相等则证明全部被勾选,于是全选按钮也赋值为true;不知道还

  • jQuery实现复选框全选/取消全选/反选及获得选择的值

    复制代码 代码如下: <!DOCTYPE html> <html> <head> <script type="text/javascript" src="../js/jquery-1.9.1.js"></script> <script type="text/javascript"> $(document).ready(function() { // 全选/取消全部 $(&qu

  • 原生JS版和jquery版实现checkbox的全选/全不选/点选/行内点选(Mr.Think)

    日常项目中, 对于列表类文章或数据, 大概都会用到checkbox的全选或全不选的功能, 以前的项目中也写过checkbox的选择js, 但都没有整理过. 正好前几天一个兄弟遇到了这个问题, 索性, 我花了点时间, 用原生JS与jQuery分别写了一个版本, 考虑到使用时灵活性问题, 未封装, 需要的童鞋使用时自行改下相关参数. 功能介绍点此查看DEMO演示 1. 全选/全不选 选框一体实现, 即列表中选框的状态与全选/全不选框前的选框状态一致; 2. 自动更改 全选/全不选 选框的状态, 即列

  • JavaScript实现全选取消效果

    本文实例为大家分享了js实现全选取消效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide { display: none; } .c1 { position: fixed; left: 0; top:

  • 使用vue.js实现checkbox的全选和多个的删除功能

    template代码: <template> <div class="hello"> <ul> <li v-for="(item, index) in proData"> <label for=""> <input type="checkbox" :value="index" v-model="selectArr">

  • 利用Vue.js实现checkbox的全选反选效果

    前言 这篇文章主要是跟大家分享了利用Vue.js实现checkbox的全选反选效果,之前写的代码存在一个bug,就是当你选择全选的时候去掉后面的一个选项,再点全选结果就是反的了.后来很感谢朋友留言帮我改了这个问题嘻嘻,下面一起来看看具体是怎么实现的吧. html示例代码 <template> <div> <input type='checkbox' class='input-checkbox' v-model='checked' v-on:click='checkedAll'

随机推荐