- 浏览: 107200 次
文章分类
最新评论
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" />
发表评论
-
js中递归函数的使用方法例子
2014-08-25 16:54 843转自:http://blog.csdn.net/jbxue1 ... -
js刷新页面方法大全(收藏)
2014-03-22 17:53 477收藏一些js刷新当前页面的方法,这个在编程中经常用得到,正在 ... -
jquery右下角弹出提示框的实现代码
2013-10-08 21:16 1228右下角弹出提示框想必大家都有见到过吧,其实有实现方法有很多,本 ... -
javascript实现复选框只能选择一项
2013-10-08 21:13 628分享下javascript实现复选框只能选择一项的方法。 ... -
javascript 函数声明与函数表达式的区别介绍
2013-10-06 23:13 452javascript中的函数声明与函数表达式使用比较频 ... -
javascript自启动函数的问题探讨
2013-10-06 23:11 570javascript的自启动函数。 两段代码: ... -
iframe自适应高度的多种方法方法
2013-09-27 11:14 740不带边框的iframe因为能和网页无缝的结合从而不刷新页面的情 ... -
分享三个iframe自适应高度的例子
2013-09-27 11:10 442iframe自适应高度 本文介绍下,iframe自适应高度的例 ... -
jquery刷新页面的方法
2013-09-27 10:47 787局部刷新: 常见的有以 ... -
jquery根据ID填充文本框的代码示例
2013-07-03 16:54 763根据ID填充文本框的小例子。 需要引入外部jquery框架。 ... -
js实现禁止刷新与回退的代码
2013-05-10 22:59 919禁止页面刷新,用javascript代码即可轻松实现,来看本文 ... -
Js动态添加复选框Checkbox的方法
2013-04-08 22:14 2205Js动态添加复选框Checkbox的实例方法!!! 首先,使 ... -
Jquery图片滚动与幻灯片的实例代码
2013-04-08 22:12 742Jquery图片滚动与幻灯片的实例代码!! 1、图片滚动 ...
相关推荐
HtML javascritp checkbox 全选HtML javascritp checkbox 全选
js实现checkbox 全选和取消 自己亲测可以使用
winform DataGridView表头带CheckBox全选;winform DataGridView表头带CheckBox全选
jquery Checkbox 全选 反选 全不选 多种实现方法 和表单验证
JQuery实现checkbox的全选取消全选
checkBox全选——jscheckBox全选——jscheckBox全选——jscheckBox全选——jscheckBox全选——jscheckBox全选——js
JS控制checkbox全选、取消全选、删除功能的代码贴出来。 看下面两种实现方法:
DevExpress 实现checkbox全选效果,内有主要代码,虽不能直接运行,但是都有详细的注释说明
CheckBox全选与否,及删除问题
高级控件(datagridview等)中加入checkbox实现全选和反选经典例子
Recyclerview item上CheckBox,包括全选,取消全选,单选功能
checkbox.html 博文链接:https://crazymud.iteye.com/blog/426702
Checkbox全选反选.html
android checkbox全选反选
flex Datagrid checkbox全选 Datagrid
简约时尚CSS样式,checkbox 全选或取消全选、或得到选中个数全案例使用详解
本文实例讲述了jQuery实现checkbox全选的方法。分享给大家供大家参考。具体分析如下: 通过checkbox 进行全选和取消全选的操作,如果通过toggle进行处理,则会出现checkbox无法显示对勾的问题。 使用click事件,根据...
js checkbox全选 反选 取消全部设置表单html复选框
listview带checkbox全选、取消功能精简版
ExpandableListView中group和child自定义视图带CheckBox,实现child全选、部分选中功能,同时实现类似邮件群发的用户选择功能,选中的用户在EditText中显示,点击后移除. 更新: 1. ExpandableListView勾选后生成的...