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 相关文章推荐
ExtJS 工具栏 分页事件参数
Mar 05 Javascript
Node.js插件的正确编写方式
Aug 03 Javascript
js获取字符串最后一位方法汇总
Nov 13 Javascript
js获取本机操作系统类型的两种方法
Dec 19 Javascript
理解jquery事件冒泡
Jan 03 Javascript
微信小程序 火车票查询实例讲解
Oct 17 Javascript
jQuery基于正则表达式的表单验证功能示例
Jan 21 Javascript
JavaScript 用fetch 实现异步下载文件功能
Jul 21 Javascript
浅谈webpack打包过程中因为图片的路径导致的问题
Feb 21 Javascript
浅谈vue引用静态资源需要注意的事项
Sep 28 Javascript
详解如何使用nvm管理Node.js多版本
May 06 Javascript
Vue.js暴露方法给WebView的使用操作
Sep 07 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
一个改进的UBB类
2006/10/09 PHP
php 数据结构之链表队列
2017/10/17 PHP
PHP实现创建一个RPC服务操作示例
2020/02/23 PHP
JavaScript 异步调用框架 (Part 4 - 链式调用)
2009/08/04 Javascript
Exitjs获取DataView中图片文件名
2009/11/26 Javascript
jquery实现网站超链接和图片提示效果
2013/03/21 Javascript
javascript实现倒计时N秒后网页自动跳转代码
2014/12/11 Javascript
jQuery实现的鼠标经过时变宽的效果(附demo源码)
2016/04/28 Javascript
JS获取一个未知DIV高度的方法
2016/08/09 Javascript
jquery过滤特殊字符',防sql注入的实现方法
2016/08/17 Javascript
一道面试题引发的对javascript类型转换的思考
2017/03/06 Javascript
详解如何使用webpack+es6开发angular1.x
2017/08/16 Javascript
JS实现小球的弹性碰撞效果
2017/11/11 Javascript
Javascript中的作用域及块级作用域
2017/12/08 Javascript
JavaScript比较同一天的时间大小实例代码
2018/02/09 Javascript
Angular中使用better-scroll插件的方法
2018/03/27 Javascript
Vue.js轮播图走马灯代码实例(全)
2019/05/08 Javascript
Vue  webpack 项目自动打包压缩成zip文件的方法
2019/07/24 Javascript
关于AngularJS中几种Providers的区别总结
2020/05/17 Javascript
react使用antd表单赋值,用于修改弹框的操作
2020/10/29 Javascript
[00:58]2016年国际邀请赛勇士令状宣传片
2016/06/01 DOTA
python局部赋值的规则
2013/03/07 Python
python分析网页上所有超链接的方法
2015/05/08 Python
解决python中 f.write写入中文出错的问题
2018/10/31 Python
在Python中使用Neo4j的方法
2019/03/14 Python
Anaconda和ipython环境适配的实现
2020/04/22 Python
Selenium python时间控件输入问题解决方案
2020/07/22 Python
将SVG图引入到HTML页面的实现
2019/09/20 HTML / CSS
浅谈amaze-ui中datepicker和datetimepicker注意的几点
2020/08/21 HTML / CSS
若干个Java基础面试题
2015/05/19 面试题
大学运动会通讯稿
2014/01/28 职场文书
消防应急演练方案
2014/02/12 职场文书
个人对照检查材料
2014/02/12 职场文书
家长会演讲稿
2014/04/26 职场文书
农村党员学习党的群众路线教育实践活动心得体会
2014/11/04 职场文书
实用干货:敬酒词大全,帮你应付各种场合
2019/11/21 职场文书