jQuery 全选效果实现代码

2020-05-22 15:16:42易采站长站整理

多选效果如下图





<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”;