代码如下
function selectAll(selectAllID,checkboxName){
var oEvent = oEvent ? oEvent : window.event
var oElem = oEvent.toElement ? oEvent.toElement : oEvent.relatedTarget;
var checks = document.getElementsByName(checkboxName);
var tag = document.getElementById(selectAllID);
if(oElem.id==selectAllID){
for(var i=0;i<checks.length;i++){
checks[i].checked=tag.checked;
}
return ;
}else{
if(oElem.checked){//如果被选中
for(var i=0;i<checks.length;i++){//遍历所有
if(checks[i].checked==false){//如果有未选中的则全选置为未选中状态
tag.checked = false;
return ;
}
}
tag.checked = true;//如果全部选中则全选框置为选中状态
return ;
}else{//如果没被选中
tag.checked = false;
return ;
}
}
};
在jsp页面引用的示例如下
<input onclick="selectAll('selectTag','ids');" type="checkbox" name="selectTag" id="selectTag" />全选
<input type="checkbox" onclick="selectAll('selectTag','ids');" name="ids" value="${ host.id}"/>
分享到:
相关推荐
纯JavaScript全选功能 <input type="checkbox" id="all"/> 省市 <input type="checkbox" class="a"/> 山东 <input type="checkbox" class="a"/> 山西 <input type="checkbox" class="a"/> 北京 ...
在网页设计中,全选功能是一项常见的需求,特别是在表格或者多行文本输入场景下。纯CSS实现全选效果,能够帮助用户快速选择页面上的所有元素,提高操作效率。本话题将详细探讨如何利用CSS实现这一功能,同时兼顾样式...
全选功能 ```javascript function checkAll() { $('input[name="TheID"]').prop("checked", true); } ``` - **解析**:使用jQuery的选择器`$('input[name="TheID"]')`来选择所有名为`TheID`的Checkbox,然后使用...
在网页开发中,Checkbox(复选框)是用户界面中...对于小型项目,前两种纯JavaScript的方法足够;对于大型项目,结合服务器端处理可能更为合适。在实现时,应确保代码的可维护性和可扩展性,避免冗余,提高用户体验。
本文将详细讲解如何利用JavaScript(包括jQuery)实现多选框(multiple)的全选和取消全选功能。 首先,我们需要理解HTML中的`<select>`元素和`<option>`子元素。`<select>`用于创建下拉列表,`multiple`属性使得...
在JavaScript和jQuery中,全选和反选功能是常见的交互设计,主要用于用户界面中的复选框操作。在表格、列表或者其他需要多选的场景中,全选和反选功能能够大大提高用户体验。以下将详细介绍如何使用JavaScript和...
本篇文章将详细介绍如何利用JavaScript实现多选框的全选和反选功能。 #### 一、理解需求 根据提供的描述:“多选框全选和反选,用js做的,多选框单选和反选,和使用的代码”,我们可以明确以下几点: 1. **目标**...
总结来说,纯JavaScript实现选择框的全选与反选功能主要涉及以下步骤: 1. 获取HTML中的复选框元素。 2. 为全选/反选的主复选框添加点击事件监听器,根据其状态更新子复选框的状态。 3. 为每个子复选框添加点击事件...
JavaScript 实现复选框全选和取消全选的效果是一个常见的前端交互功能,广泛应用于数据筛选、表单提交等场景。本文将深入解析如何利用 JavaScript 和 jQuery 来完成这一功能。 首先,HTML 结构中通常会有一个全选...
以上代码展示了如何使用纯JavaScript实现复选框的全选、全不选和反选功能。在实际应用中,可能还需要考虑其他因素,如性能优化(例如,使用事件委托而不是为每个按钮添加监听器),或者在某些情况下,使用更现代的...
综上所述,这个"纯JS+HTML写的checkBox Tree 级联选中"实例是一个实用的前端组件,它实现了级联选中的核心功能,且没有明显的BUG。开发者可以依据这个基础进一步扩展,例如添加异步加载数据、拖放排序、节点展开/...
这是一个针对作业板系统的通用JavaScript文件,该系统主要依赖于`jQuery.js`库。这意味着在使用这个JS文件中的功能时,必须确保页面中已经包含了jQuery库。 #### 2.2 CheckBox全选/反选操作 这是文件的主要功能,即...
它结合了JavaScript和CSS,提供了丰富的配置选项和功能,如多选、单选、部分选以及全选功能。下面我们将详细探讨如何实现ZTree的这些功能。 首先,ZTree的核心是JavaScript,它基于jQuery库,因此在使用前需确保...
购物车案例功能介绍:1、添加购物车,清单库存数量会对应减少,库存不足会警告;2、从购物车删除,库存将返回清单,总价相应变化;3、点击"-",数量会返回到清单库存;4、点击"+",清单中库存会减少,库存不足会警告...
本文将详细讲解如何使用纯JavaScript实现这一功能,无需依赖任何外部库如jQuery或其他框架。 一、HTML基础结构 首先,我们需要创建一个基本的HTML表格结构。这通常包括一个表格元素`<table>`,以及若干行`<tr>`和...
纯javascript实现购物车,完成从商品页向购物车中添加商品,购物车中删除商品,更改商品数量,删除商品,全选单选等购物车操作,涉及到javascript中BOM,DOM,json,cookie等知识点的应用操作,综合性较强,对于...
接下来是`SelectList.js`,这是实现Dubal ListBox功能的核心脚本。在这个文件中,开发者会定义一些关键函数来处理用户的交互事件,例如: 1. `init()`:初始化控件,可能包括设置初始值、绑定事件监听器等。 2. `...
在本文中,我们将深入探讨如何使用JavaScript库JQuery来实现一个基本的购物车功能。购物车功能是电子商务网站的核心组成部分,它允许用户选择并管理他们打算购买的商品。在这个实例中,我们将关注全选商品功能以及...
全选功能允许用户一键选中列表或表格中的所有项目,通常在数据管理或批量操作的场景下非常实用。在C#和ASP.NET中,全选功能可以通过在前端HTML页面设置一个复选框,并在后端处理事件来实现。当用户点击这个复选框时...