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> ";
echo "<td width="6px"><input type="Checkbox" id="item_id$i" name="item_id$i" class="selectable" value="" . $item["item_id"] . "" /></td> ";
//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> ";
//unit
echo "<td>" . $item["unit_name"] . "</td> ";
//Ordered Qty
echo "<td style="text-align: right" style="text-align: right">" . $item["quantity"] . "</td> ";
//Received Qty
echo "<td style="text-align: right" style="text-align: right">" . $item["received_qty"] . "</td> ";
//Quantity
echo "<td><input style="width: 99%; text-align: right" type="text" id="quantity$i" name="quantity$i" MaxLength="4" OnKeyPress="EnsureDecimal（this）"/></td> ";
//Remark column
echo "<td><input style="width: 99%;" type="text" id="remark$i" name="remark$i" MaxLength="30"></td>";
echo "</tr> ";
$i++;
}
？>
</table>

局部多选如下图

代码
复制代码代码如下:
<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> ";
echo " <td style="width:20px"><input model="$model_name" class="selectall" type="checkbox" onclick="selectAllMenu（this）;"/></td> ";
echo " <td colspan="2"><b>$model_name</b></td> ";
echo "</tr> ";
}
echo "<tr> ";
echo " <td></td> ";
echo " <td style="width:20px"><input model="$model_name" type="checkbox" class="selectable"/></td> ";
echo " <td>" . $privilege["display_text"] . "</td> ";
echo "</tr> ";
}
？>
</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>