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 相关文章推荐
半角全角相互转换的js函数
Oct 16 Javascript
js实时监听文本框状态的方法
Apr 26 Javascript
js判断变量初始化的三种形式及推荐用的形式
Jul 22 Javascript
JS+CSS实现Div弹出窗口同时背景变暗的方法
Mar 04 Javascript
JavaScript中的toLocaleDateString()方法使用简介
Jun 12 Javascript
基于JavaScript操作DOM常用的API小结
Dec 01 Javascript
继续学习javascript闭包
Dec 03 Javascript
JavaScript编程学习技巧汇总
Feb 21 Javascript
vue-router 学习快速入门
Mar 01 Javascript
JavaScript之Date_动力节点Java学院整理
Jun 28 Javascript
原生js实现省市区三级联动代码分享
Feb 12 Javascript
微信小程序点击滚动到指定位置的实现
May 22 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
php连接mysql数据库代码
2009/03/10 PHP
深入解析PHP中逗号与点号的区别
2013/08/05 PHP
PHP往XML中添加节点的方法
2015/03/12 PHP
PHP模板引擎Smarty之配置文件在模板变量中的使用方法示例
2016/04/11 PHP
JS中动态添加事件(绑定事件)的代码
2011/01/09 Javascript
jQuery截取指定长度字符串的实现原理及代码
2014/07/01 Javascript
浅析javascript的间隔调用和延时调用
2014/11/12 Javascript
JS简单模拟触发按钮点击功能的方法
2015/11/30 Javascript
js检测离开或刷新页面时表单数据是否更改的方法
2016/08/02 Javascript
javascript算法之二叉搜索树的示例代码
2017/09/12 Javascript
js中json对象和字符串的理解及相互转化操作实现方法
2017/09/22 Javascript
vue axios请求频繁时取消上一次请求的方法
2018/11/10 Javascript
vue-test-utils初使用详解
2019/05/23 Javascript
Sublime开发python程序的示例代码
2018/01/24 Python
python 文件转成16进制数组的实例
2018/07/09 Python
python实现播放音频和录音功能示例代码
2018/12/30 Python
python调用接口的4种方式代码实例
2019/11/19 Python
套娃式文件夹如何通过Python批量处理
2020/08/23 Python
CSS3弹性布局内容对齐(justify-content)属性使用详解
2017/07/31 HTML / CSS
HTML5在IE10、火狐下中文乱码问题的解决方法
2013/11/18 HTML / CSS
用html5的canvas和JavaScript创建一个绘图程序的简单实例
2016/07/06 HTML / CSS
罗马尼亚购物网站:Vivantis.ro
2019/07/20 全球购物
台湾专柜女包:KINAZ
2019/12/26 全球购物
Ooni英国官网:披萨烤箱
2020/05/31 全球购物
爱与责任演讲稿
2014/05/20 职场文书
本科应届生自荐信
2014/06/29 职场文书
中秋节国旗下演讲稿
2014/09/05 职场文书
2014党委书记四风问题对照检查材料思想汇报
2014/09/22 职场文书
学校领导干部民主生活会整改方案
2014/09/29 职场文书
英语辞职信怎么写
2015/02/28 职场文书
2015年安全工作总结范文
2015/04/02 职场文书
旷工辞退通知书
2015/04/17 职场文书
企业团队精神心得体会
2016/01/19 职场文书
导游词之河姆渡遗址博物馆
2019/10/10 职场文书
某某幼儿园的教育教学管理调研分析报告
2019/11/29 职场文书
详解redis在微服务领域的贡献
2021/10/16 Redis