jQuery实现全选效果

多选效果如下图

代码如下:

<mce: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();
        });
    }
// --></mce:script>

<table id="detail-table" style="width: 100%; background: #F0F8FF;">
    <thead>
        <tr>
            <th ><input id="selectall" type="checkbox" /></th>
            <th style="text-align:center" mce_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" mce_style="text-align: right">" . $item["quantity"] . "</td>/n";
            //Received Qty
            echo "<td style="text-align: right" mce_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>

 

局部多选如下图

 

代码

<mce: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();
        });
    }
// --></mce: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" mce_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" mce_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>

 

 

 

 

版权声明：本文为博主原创文章，未经博主允许不得转载。