多选效果如下图
代码如下:
<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>
版权声明:本文为博主原创文章,未经博主允许不得转载。
您还没有登录,请您登录后再发表评论
以上就是使用JavaScript和jQuery实现全选效果的两种方法。这两种方法都能有效地提高用户体验,使得用户在处理大量可选项目时能更便捷地进行全选或反选操作。在实际开发中,可以根据项目的具体需求和性能考虑选择适合...
下面是使用jQuery实现全选的示例代码: ```javascript $(document).ready(function () { $("#divAll").children("input").click(function () { $("#divOne").children("input").prop("checked", $(this).prop(...
在 jQuery 中,我们可以通过获取复选框的选择状态,并将其设置为选中状态来实现全选。假设我们有一个 id 为 "selectAll" 的全选按钮和一组 class 为 "checkboxItem" 的复选框,可以使用以下代码: ```javascript $...
在网页开发中,jQuery 是一个非常流行的 JavaScript 库,它提供了丰富的功能来简化 DOM 操作、事件处理以及动画效果。"jquery全选反选全不选案例" 是一个常见的交互功能,常见于表格或者列表中,允许用户一键选择或...
"jquery通用全选并控制操作按钮"这个主题是关于利用jQuery实现一种常见的用户界面功能,即在表格或者列表中提供一个全选按钮,可以一键选择所有选项,同时根据选中项的数量来控制其他操作按钮的可见性或可用性。...
在JavaScript(JS)中,全选效果是一种常见的用户交互功能,尤其在网页表格或列表中。这个功能允许用户通过单击一个按钮或链接来选择所有可选项目,或者取消已选中的所有项。这里我们将详细探讨如何使用JavaScript...
在这个场景中,我们关注的是如何利用jQuery来实现全选、取消选择、反选的功能,以及如何实现元素的拖拽效果。以下是关于这些功能的详细解释: **全选、取消和反选功能**: 1. **全选**:这个功能允许用户一键选中...
为了实现全选、反选和全不选的功能,通常会添加一个主复选框,当点击这个主复选框时,所有关联的子复选框都会同步其选中状态。 一、全选功能 全选功能通常是通过一个名为“全选”的复选框触发,当这个复选框被选中...
### 知识点详解:使用jQuery实现全选与反选功能 #### 一、背景介绍 在Web开发中,表单处理是非常常见的需求之一。尤其是对于包含多个复选框(checkbox)的表单来说,全选、全不选以及反选等功能能够极大地提升用户...
3. 在与checkbox结合使用时,可以通过编写JavaScript代码来模拟用户按下Ctrl+A时的全选效果。 4. 实现这一效果通常需要监听键盘事件,当检测到Ctrl+A组合键被按下时,触发全选checkbox的点击事件。 5. 这种方法涉及...
1、全选 $("#btn1").click(function(){ $("input[name='checkbox']").attr("checked","true"); }) 2、取消全选(全不选) $("#btn2").click(function(){ $("input[name='checkbox']").removeAttr("checked"); }...
使用jQuery实现全选功能是一种简便的方法,因为它可以很容易地处理DOM元素的动态操作和事件绑定。下面详细介绍如何使用jQuery实现全选功能。 首先,为了实现全选功能,通常需要设计一个全选复选框和一组需要被选择...
“工具”可能指的是这个插件作为一个辅助开发的工具,可以帮助开发者快速实现全选功能。 在“压缩包子文件的文件名称列表”中,有一个名为“jquery-selectAll”的文件。这很可能是一个包含jQuery全选插件的...
首先,文章标题中提到的“jquery实现全选和全不选功能效果的实现代码”暗示我们将要探讨的是如何通过jQuery这个流行的JavaScript库来控制复选框(checkbox)的选中状态。jQuery是一个快速、小巧且功能丰富的...
下面我们将详细讨论如何利用jQuery实现全选效果,并分析给定的代码。 首先,全选效果通常涉及两个主要部分:一个主复选框(通常命名为“全选”或“全选按钮”)和一组可被选择的子项复选框。当用户点击“全选”按钮...
要实现全选和反选功能,我们可以编写jQuery函数,分别绑定到"selectAll"复选框的`change`事件上。当用户点击全选复选框时,这些函数将检查或取消所有其他复选框的状态。 首先,我们需要获取所有待选的复选框,这...
接下来,我们将使用jQuery来实现全选和反选功能。 全选功能可以通过监听全选Checkbox的`change`事件来实现,然后遍历所有子Checkbox并设置其`checked`属性: ```javascript $(document).ready(function() { $('#...
总结,通过jQuery实现全选和不全选功能是网页开发中的常见需求,通过理解和运用相关API,可以有效地提高用户体验。结合实际项目需求,开发者还可以扩展这个功能,比如添加缓动效果、处理异步数据加载等情况。
相关推荐
以上就是使用JavaScript和jQuery实现全选效果的两种方法。这两种方法都能有效地提高用户体验,使得用户在处理大量可选项目时能更便捷地进行全选或反选操作。在实际开发中,可以根据项目的具体需求和性能考虑选择适合...
下面是使用jQuery实现全选的示例代码: ```javascript $(document).ready(function () { $("#divAll").children("input").click(function () { $("#divOne").children("input").prop("checked", $(this).prop(...
在 jQuery 中,我们可以通过获取复选框的选择状态,并将其设置为选中状态来实现全选。假设我们有一个 id 为 "selectAll" 的全选按钮和一组 class 为 "checkboxItem" 的复选框,可以使用以下代码: ```javascript $...
在网页开发中,jQuery 是一个非常流行的 JavaScript 库,它提供了丰富的功能来简化 DOM 操作、事件处理以及动画效果。"jquery全选反选全不选案例" 是一个常见的交互功能,常见于表格或者列表中,允许用户一键选择或...
"jquery通用全选并控制操作按钮"这个主题是关于利用jQuery实现一种常见的用户界面功能,即在表格或者列表中提供一个全选按钮,可以一键选择所有选项,同时根据选中项的数量来控制其他操作按钮的可见性或可用性。...
在JavaScript(JS)中,全选效果是一种常见的用户交互功能,尤其在网页表格或列表中。这个功能允许用户通过单击一个按钮或链接来选择所有可选项目,或者取消已选中的所有项。这里我们将详细探讨如何使用JavaScript...
在这个场景中,我们关注的是如何利用jQuery来实现全选、取消选择、反选的功能,以及如何实现元素的拖拽效果。以下是关于这些功能的详细解释: **全选、取消和反选功能**: 1. **全选**:这个功能允许用户一键选中...
为了实现全选、反选和全不选的功能,通常会添加一个主复选框,当点击这个主复选框时,所有关联的子复选框都会同步其选中状态。 一、全选功能 全选功能通常是通过一个名为“全选”的复选框触发,当这个复选框被选中...
### 知识点详解:使用jQuery实现全选与反选功能 #### 一、背景介绍 在Web开发中,表单处理是非常常见的需求之一。尤其是对于包含多个复选框(checkbox)的表单来说,全选、全不选以及反选等功能能够极大地提升用户...
3. 在与checkbox结合使用时,可以通过编写JavaScript代码来模拟用户按下Ctrl+A时的全选效果。 4. 实现这一效果通常需要监听键盘事件,当检测到Ctrl+A组合键被按下时,触发全选checkbox的点击事件。 5. 这种方法涉及...
1、全选 $("#btn1").click(function(){ $("input[name='checkbox']").attr("checked","true"); }) 2、取消全选(全不选) $("#btn2").click(function(){ $("input[name='checkbox']").removeAttr("checked"); }...
使用jQuery实现全选功能是一种简便的方法,因为它可以很容易地处理DOM元素的动态操作和事件绑定。下面详细介绍如何使用jQuery实现全选功能。 首先,为了实现全选功能,通常需要设计一个全选复选框和一组需要被选择...
“工具”可能指的是这个插件作为一个辅助开发的工具,可以帮助开发者快速实现全选功能。 在“压缩包子文件的文件名称列表”中,有一个名为“jquery-selectAll”的文件。这很可能是一个包含jQuery全选插件的...
首先,文章标题中提到的“jquery实现全选和全不选功能效果的实现代码”暗示我们将要探讨的是如何通过jQuery这个流行的JavaScript库来控制复选框(checkbox)的选中状态。jQuery是一个快速、小巧且功能丰富的...
下面我们将详细讨论如何利用jQuery实现全选效果,并分析给定的代码。 首先,全选效果通常涉及两个主要部分:一个主复选框(通常命名为“全选”或“全选按钮”)和一组可被选择的子项复选框。当用户点击“全选”按钮...
要实现全选和反选功能,我们可以编写jQuery函数,分别绑定到"selectAll"复选框的`change`事件上。当用户点击全选复选框时,这些函数将检查或取消所有其他复选框的状态。 首先,我们需要获取所有待选的复选框,这...
接下来,我们将使用jQuery来实现全选和反选功能。 全选功能可以通过监听全选Checkbox的`change`事件来实现,然后遍历所有子Checkbox并设置其`checked`属性: ```javascript $(document).ready(function() { $('#...
总结,通过jQuery实现全选和不全选功能是网页开发中的常见需求,通过理解和运用相关API,可以有效地提高用户体验。结合实际项目需求,开发者还可以扩展这个功能,比如添加缓动效果、处理异步数据加载等情况。