jQuery 全选效果实现代码


Posted in Javascript onMarch 23, 2009

多选效果如下图

jQuery 全选效果实现代码

代码如下:

<script type="text/javascript"><!-- 
$(document).ready(function() { 
$("#selectall").click(selectAll); 
}); 
function selectAll() { 
var checked = $("#selectall").attr("checked"); 
$(".selectable").each(function() { 
var subchecked = $(this).attr("checked"); 
if (subchecked != checked) 
$(this).click(); 
}); 
} 
// --></script> 
<table id="detail-table" style="width: 100%; background: #F0F8FF;"> 
<thead> 
<tr> 
<th ><input id="selectall" type="checkbox" /></th> 
<th style="text-align:center" style="text-align:center">Item Name</th> 
<th style="width: 60px; text-align:center">UM</th> 
<th style="width: 80px; text-align:center">Ordered Qty</th> 
<th style="width: 80px; text-align:center">Received Qty</th> 
<th style="width: 80px; text-align:center">Quantity</th> 
<th style="width: 120px; text-align:center">Remark</th> 
</tr> 
</thead> 
<?php 
$i = 1; 
foreach($this->details as $item) { 
echo "<tr>\n"; 
echo "<td width='6px'><input type='Checkbox' id='item_id$i' name='item_id$i' class='selectable' value='" . $item["item_id"] . "' /></td>\n"; 
//item name 
echo "<td >" . $item["item_name"] . "<input type='hidden' id='item_id$i' name='item_id$i' value='" . $item["item_id"] . "' /><input type='hidden' id='item_name$i' name='item_name$i' value='" . $item["item_name"] . "' /></td>\n"; 
//unit 
echo "<td>" . $item["unit_name"] . "</td>\n"; 
//Ordered Qty 
echo "<td style="text-align: right" style="text-align: right">" . $item["quantity"] . "</td>\n"; 
//Received Qty 
echo "<td style="text-align: right" style="text-align: right">" . $item["received_qty"] . "</td>\n"; 
//Quantity 
echo "<td><input style='width: 99%; text-align: right' type='text' id='quantity$i' name='quantity$i' MaxLength='4' OnKeyPress='EnsureDecimal(this)'/></td>\n"; 
//Remark column 
echo "<td><input style='width: 99%;' type='text' id='remark$i' name='remark$i' MaxLength='30'></td>"; 
echo "</tr>\n"; 
$i++; 
} 
?> 
</table>

局部多选如下图

jQuery 全选效果实现代码

代码

<script type="text/javascript"><!-- 
function selectAllMenu(cmb) { 
var checked = cmb.checked; 
$(".selectable[model=" + cmb.model + "]").each(function() { 
var subchecked = $(this).attr("checked"); 
if (subchecked != checked) 
$(this).click(); 
}); 
} 
// --></script> <?php 
if (isset($this->user)) { 
echo "<h3>Privilege Setting For User " . $this->user ."</h3>"; 
} 
elseif (isset($this->role)) { 
echo "<h3>Privilege Setting For Role " . $this->role . "</h3>"; 
} 
else { 
echo "<h3>Privilege Setting</h3>"; 
} 
?> 
<form id="form1" method="post" action="<?php echo $this->baseUrl . '/admin/privilege/save'; ?>"> 
<center> 
<table class="stripe" style="text-align: left" style="text-align: left" width="80%"> 
<?php 
$model_name = ""; 
foreach($this->privileges as $privilege) { 
if ($model_name != $privilege['model_name']) { 
$model_name = $privilege['model_name']; 
echo "<tr>\n"; 
echo " <td style='width:20px'><input model='$model_name' class='selectall' type='checkbox' onclick='selectAllMenu(this);'/></td>\n"; 
echo " <td colspan='2'><b>$model_name</b></td>\n"; 
echo "</tr>\n"; 
} 
echo "<tr>\n"; 
echo " <td></td>\n"; 
echo " <td style='width:20px'><input model='$model_name' type='checkbox' class='selectable'/></td>\n"; 
echo " <td>" . $privilege['display_text'] . "</td>\n"; 
echo "</tr>\n"; 
} 
?> 
</table> 
</center> 
<div style="padding-top: 10px" style="padding-top: 10px"> 
<?php 
$button_panel = new ButtonPanel(); 
$button_panel->setButtonAlign("center"); 
$button_panel->addButton(array("text" => "Save", "type" => "submit")); 
$button_panel->addButton(array("text" => "Reset", "type" => "reset")); 
$button_panel->addButton(array("text" => "Back", "onclick" => "window.history.back();")); 
$button_panel->render(); 
?> 
</div> 
</form>
Javascript 相关文章推荐
jQuery使用手册之 事件处理
Mar 24 Javascript
JQuery对class属性的操作实现按钮开关效果
Oct 11 Javascript
jquery实现效果比较好的table选中行颜色
Mar 25 Javascript
浅谈JavaScript异常处理语句
Jun 26 Javascript
jQuery基础知识点总结(DOM操作)
Jun 01 Javascript
关于在Servelet中如何获取当前时间的操作方法
Jun 28 Javascript
angular基于路由控制ui-router实现系统权限控制
Sep 27 Javascript
jQuery特殊符号转义的实现
Nov 30 Javascript
JavaScript数组和对象的复制
Mar 21 Javascript
js实现颜色阶梯渐变效果(Gradient算法)
Mar 21 Javascript
JavaScript函数柯里化原理与用法分析
Mar 31 Javascript
在vue中嵌入外部网站的实现
Nov 13 Javascript
利用javascript移动div层-javascript 拖动层
Mar 22 #Javascript
javascript 对象定义方法 简单易学
Mar 22 #Javascript
JS array 数组详解
Mar 22 #Javascript
javascript multibox 全选
Mar 22 #Javascript
Js 获取当前日期时间及其它操作实现代码
Mar 04 #Javascript
JavaScript 计算当天是本年本月的第几周
Mar 22 #Javascript
DWR Ext 加载数据
Mar 22 #Javascript
You might like
收音机的保养
2021/03/01 无线电
使用YUI+Ant 实现JS CSS压缩
2014/09/02 PHP
PHP获取客户端及服务器端IP的封装类
2016/07/21 PHP
php获取数据库中数据的实现方法
2017/06/01 PHP
浅谈Yii乐观锁的使用及原理
2017/07/25 PHP
php处理多图上传压缩代码功能
2018/06/13 PHP
Thinkphp5.0框架视图view的模板布局用法分析
2019/10/12 PHP
用脚本调用样式的几种方法
2006/12/09 Javascript
TextArea 控件的最大长度问题(js json)
2009/12/16 Javascript
使用CSS和jQuery模拟select并附提交后取得数据的代码
2013/10/18 Javascript
window.location.hash知识汇总
2015/11/09 Javascript
Jquery easyui 实现动态树
2015/11/17 Javascript
通过npm引用的vue组件使用详解
2017/03/02 Javascript
jquery实现超简单的瀑布流布局【推荐】
2017/03/08 Javascript
用 js 的 selection range 操作选择区域内容和图片
2017/04/18 Javascript
jQuery 防止相同的事件快速重复触发方法
2018/02/08 jQuery
压缩Vue.js打包后的体积方法总结(Vue.js打包后体积过大问题)
2020/02/03 Javascript
JS面向对象编程实现的拖拽功能案例详解
2020/03/03 Javascript
解决vue组件销毁之后计时器继续执行的问题
2020/07/21 Javascript
[01:02:54]完美世界DOTA2联赛PWL S2 FTD vs GXR 第一场 11.22
2020/11/26 DOTA
python学习 流程控制语句详解
2016/06/01 Python
Python中pandas dataframe删除一行或一列:drop函数详解
2018/07/03 Python
python 计算一个字符串中所有数字的和实例
2019/06/11 Python
Python qqbot 实现qq机器人的示例代码
2019/07/11 Python
python写一个随机点名软件的实例
2019/11/28 Python
python实现输入的数据在地图上生成热力图效果
2019/12/06 Python
Scrapy-Redis之RedisSpider与RedisCrawlSpider详解
2020/11/18 Python
Python解析微信dat文件的方法
2020/11/30 Python
python 利用百度API识别图片文字(多线程版)
2020/12/14 Python
英国第一的购买便宜玩具和游戏的在线购物网站:Bargain Max
2018/01/24 全球购物
2013年研究生毕业感言
2014/02/06 职场文书
党的群众路线教育实践活动个人对照检查材料范文
2014/09/25 职场文书
解除同居协议书
2015/01/29 职场文书
优秀大学生自荐信
2015/03/26 职场文书
民事上诉状范文
2015/05/22 职场文书
《童年》读后感(三篇)
2019/08/27 职场文书