jQuery 全選效果實(shí)現(xiàn)代碼
更新時(shí)間:2009年03月23日 23:31:05 作者:
利用jquery實(shí)現(xiàn)的全選效果代碼,實(shí)際上我感覺(jué)直接用js好像更容易些。不過(guò)這樣對(duì)于jquery的操作可以更熟悉。
多選效果如下圖
代碼如下:
復(fù)制代碼 代碼如下:
<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>
局部多選如下圖
代碼
復(fù)制代碼 代碼如下:
<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復(fù)選框CHECKBOX全選,取消全選
- jquery復(fù)選框CHECKBOX全選、反選
- JQUERY CHECKBOX全選,取消全選,反選方法三
- jquery 實(shí)現(xiàn)的全選和反選
- checkbox全選/取消全選以及checkbox遍歷jQuery實(shí)現(xiàn)代碼
- jQuery CheckBox全選、全不選實(shí)現(xiàn)代碼小結(jié)
- jquery一句話全選/取消全選
- 基于JQuery實(shí)現(xiàn)CheckBox全選全不選
- jquery 實(shí)現(xiàn)checkbox全選,反選,全不選等功能代碼(奇數(shù))
- jQuery實(shí)現(xiàn)類(lèi)似淘寶購(gòu)物車(chē)全選狀態(tài)示例
- jQuery 全選/反選以及單擊行改變背景色實(shí)例
- jQuery判斷checkbox(復(fù)選框)是否被選中以及全選、反選實(shí)現(xiàn)代碼
- 用JQuery實(shí)現(xiàn)全選與取消的兩種簡(jiǎn)單方法
- jquery操作checkbox實(shí)現(xiàn)全選和取消全選
- jQuery實(shí)現(xiàn)復(fù)選框全選/取消全選/反選及獲得選擇的值
- jquery中checkbox全選失效的解決方法
- jQuery實(shí)現(xiàn)列表的全選功能
相關(guān)文章
jQuery學(xué)習(xí)筆記(1)--用jQuery實(shí)現(xiàn)異步通信(用json傳值)具體思路
這是一個(gè)簡(jiǎn)單的POST 請(qǐng)求功能以取代復(fù)雜 $.ajax,請(qǐng)求成功時(shí)可調(diào)用回調(diào)函數(shù),感興趣的朋友可以參考下哈,希望對(duì)你有所幫助2013-04-04Jquery Ajax解析XML數(shù)據(jù)(同步及異步調(diào)用)簡(jiǎn)單實(shí)例
本篇文章主要是對(duì)Jquery Ajax解析XML數(shù)據(jù)(同步及異步調(diào)用)的簡(jiǎn)單實(shí)例進(jìn)行了介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2014-02-02Jquery顯示和隱藏元素或設(shè)為只讀(含Ligerui的控件禁用,實(shí)例說(shuō)明介紹)
本篇文章是對(duì)Jquery中顯示和隱藏元素或設(shè)為只讀以及Ligerui的控件禁用實(shí)現(xiàn)代碼進(jìn)行了分析介紹,需要的朋友可以參考下2013-07-07jQuery 全選 全部選 反選 實(shí)現(xiàn)代碼
上次做了一個(gè)前端項(xiàng)目,其中有功能要求實(shí)現(xiàn)jquery 全選和反選功能,下面小編抽個(gè)時(shí)間把實(shí)現(xiàn)代碼分享到腳本之家平臺(tái)供大家參考下2016-08-08仿新浪微博返回頂部的jquery實(shí)現(xiàn)代碼
在web頁(yè)面中,如果頁(yè)面較高,為了方便用戶快速地返回頂部,都會(huì)添加一個(gè)返回頂部按鈕2012-10-10jQuery不兼容input的change事件問(wèn)題解決過(guò)程
本文記錄了在項(xiàng)目中發(fā)現(xiàn)在IE9中不會(huì)立即觸發(fā)change事件,存在兼容問(wèn)題的解決過(guò)程,非常的詳盡,解決過(guò)程中也有新問(wèn)題出現(xiàn),最終都解決完畢,完美實(shí)現(xiàn)了兼容各大主流瀏覽器2014-12-12