jQuery 全选效果实现代码

2014-05-03  来源:本站原创  分类:jquery  人气:2 

利用jquery实现的全选效果代码,实际上我感觉直接用js好像更容易些。不过这样对于jquery的操作可以更熟悉。

多选效果如下图

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>
相关文章
  • jQuery 全选效果实现代码 2014-05-03

    利用jquery实现的全选效果代码,实际上我感觉直接用js好像更容易些.不过这样对于jquery的操作可以更熟悉. 多选效果如下图 代码如下: <script type="text/javascript"><!-- $(document).ready(function() { $("#selectall").click(selectAll); }); function selectAll() { var checked = $("#sel

  • Jquery 1.42 checkbox 全选和反选代码 2013-11-03

    用jquery实现的checkbox全选和反选代码,需要的朋友可以参考下. Jquery代码 <script type="text/javascript" src="jquery-1.4.2.min.js"></script> <script type="text/javascript"> function Checked(){ //定义函数checked $(".chk").each(fu

  • jquery全选checkBox功能实现代码(取消全选功能) 2015-02-13

    这篇文章主要介绍了jquery实现checkBox全选功能.取消全选功能,代码简单,大家可以直接参考使用 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <meta http-equiv="Content-Type" content=&q

  • 简单的Jquery全选功能 2014-01-17

    很简单的Jquery全选功能,看代码就明白,很实用 记载一段最简单的全选功能Jquery代码. [code ]$(function(){ $("#chkAll").click(function(){ $("input:checkbox").attr("checked",$(this).attr("checked")); }); }); [/code]

  • 基于jquery的loading效果实现代码 2014-05-07

    基于jquery的loading效果实现代码,需要的朋友可以参考下. 在代码<head></head>里加入以下代码: <script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(window).load(function(){$("#loading"

  • jquery实现手风琴效果实例代码 2014-08-22

    这篇文章介绍了jquery实现手风琴效果实例代码,有需要的朋友可以参考一下 //jquery实现手风琴效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&quo

  • GridView中加上CheckBox 的全选功能的代码 2015-03-03

    GridView中加上CheckBox 的全选功能的代码,需要的朋友可以参考一下 首先我???然是要先做出一??有?料的GridView GridView做好後,我??在後方新增一???影?谖?TemplateField) ?在新增的?影?谖恢械?eaderTemplate加入一??CheckBox作?槿?x用,然後在ItemTemplate也加入一??CheckBox <asp:TemplateField> <HeaderTemplate> <asp:CheckBox ID

  • 基于jquery的3d效果实现代码 2015-03-07

    基于jquery的3d效果实现代码,需要的朋友可以参考下. <html> <head> <script type="text/javascript" src="http://demo.jb51.net/jslib/jquery/jquery-1.4.2.min.js"></script><style> .s_c{ position:relative; width:800px; height:300px; b

  • jQuery判断checkbox(复选框)是否被选中以及全选.反选实现代码 2014-06-06

    本篇文章主要是对jQuery判断checkbox(复选框)是否被选中以及全选.反选实现代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 jQuery判断checkbox(复选框)是否被选中:if($("#id").attr("checked")==true) jQuery实现checkbox(复选框)选中.全选/反选代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/

  • jquery 页面全选框实践代码 2014-05-05

    页面中经常遇到与全选相关的操作,利用jquery集成了一下,主要为了方便使用吧- <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>全选</title> </head> <body> <div>demo <input type="

  • jquery数组之存放checkbox全选值示例代码 2014-07-23

    使用jquery数组可以存放checkbox全选值,下面有个不错的示例,感兴趣的朋友可以参考下 <input type="checkbox" id="checkAll" value="1">全选/全部不选 <input type="checkbox" name="items" value="1">1 <input type="checkbox&qu

  • jQuery 全选/反选以及单击行改变背景色实例 2013-11-02

    通过jQuery实现全选或反选以及单击行改变背景色,具体代码如下,感兴趣的朋友可以参考下哈,希望对大家有所帮助 我先把CSS样式放出来,其实这个可以直接忽略 body{margin:0;padding:0;font-size:12px;font-family:微软雅黑;} .datagrid{width:100%;} .datagird tr th{background-color:#191970; font-size:14px;} .datagrid tr th, .datagrid tr t

  • 比较全的JS checkbox全选.取消全选.删除功能代码 2014-12-10

    今天把JS控制checkbox全选.取消全选.删除功能的代码贴出来.. 看下面两种实现方法: JS checkbox 方法一: function checkAll() { var code_Values = document.all['code_Value']; if(code_Values.length){ for(var i=0;i<code_Values.length;i++) { code_Values[i].checked = true; } }else{ code_Values.ch

  • Javascript 实现TreeView CheckBox全选效果 2015-01-21

    Javascript 实现TreeView CheckBox 选中父节点时所有子节点全选,取消时全部取消 function OnTreeNodeChecked() { var ele = event.srcElement; if (ele.type == 'checkbox') { var childrenDivID = ele.id.replace('CheckBox', 'Nodes'); var div = document.getElementById(childrenDivID); i

  • JavaScript实现GriwView单列全选(自写代码) 2015-02-19

    在 GridView 里有一系列的 Checkbox ,要实现对其全选或全不选,二网上的都不否和要求,于是我自己写了JavaScript 代码,贴出来供大家参考 在 GridView 里有一系列的 Checkbox ,要实现对其全选或全不选.开始在网上找了,但是参考的代码会全选 GridView 里所有的 Checkbox ,而我要的是单列全选.如图: 审核和权限是要分开的. 我自己写了 JavaScript 代码,贴出来供大家参考. function chkAll(CheckAll) { va

  • jquery全选/全不选/反选另一种实现方法(配合原生js) 2015-04-02

    本文主要介绍下jquery另一种全选.全不选.反选的方式(与原生js混合使用),感兴趣的朋友可以参考下哈,希望对你有所帮助 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/x

  • jquery滚动字幕效果的代码示例 2013-05-07

    本篇文章介绍下,使用Jquery实现的一个滚动字幕效果的代码,有需要的朋友,可以拿去用了. 滚动字幕效果,在一些特殊场合可以用得上哦,代码如下:需要引入外部jquery文件. <html> <head> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <script src="http://demo.jbxue.com/jque

  • jquery特效 幻灯片效果示例代码 2013-10-27

    jquery特效中的幻灯片想必大家已不陌生吧,下面为大家分享个比较不错的幻灯片效果,附有源码,感兴趣的朋友可以学习下哈 jquery特效 幻灯片效果,效果图如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf8" /> <title>jquery特效</titl

  • 修改好的jquery滚动字幕效果实现代码 2013-11-24

    修改好的jquery滚动字幕效果,需要的朋友可以参考下. 最终效果图 源代码: <html> <head> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <script src="http://demo.jb51.net/jslib/jquery/jquery.js"></script> <s

  • jquery全选和取消全选 2013-07-24

    全选和取消全选 $('.choose_all').click(function(){ $(":checkbox").attr("checked", this.checked); });