`

纯js 写的全选功能

 
阅读更多
代码如下
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}"/>
分享到:
评论

相关推荐

    jquery与js实现全选功能的区别.docx

    纯JavaScript全选功能 &lt;input type="checkbox" id="all"/&gt; 省市 &lt;input type="checkbox" class="a"/&gt; 山东 &lt;input type="checkbox" class="a"/&gt; 山西 &lt;input type="checkbox" class="a"/&gt; 北京 ...

    纯css实现全选效果

    在网页设计中,全选功能是一项常见的需求,特别是在表格或者多行文本输入场景下。纯CSS实现全选效果,能够帮助用户快速选择页面上的所有元素,提高操作效率。本话题将详细探讨如何利用CSS实现这一功能,同时兼顾样式...

    jquery、js操作checkbox全选反选.docx

    全选功能 ```javascript function checkAll() { $('input[name="TheID"]').prop("checked", true); } ``` - **解析**:使用jQuery的选择器`$('input[name="TheID"]')`来选择所有名为`TheID`的Checkbox,然后使用...

    三种方式实现checkbox全选,反选

    在网页开发中,Checkbox(复选框)是用户界面中...对于小型项目,前两种纯JavaScript的方法足够;对于大型项目,结合服务器端处理可能更为合适。在实现时,应确保代码的可维护性和可扩展性,避免冗余,提高用户体验。

    js multiple全选与取消全选实现代码

    本文将详细讲解如何利用JavaScript(包括jQuery)实现多选框(multiple)的全选和取消全选功能。 首先,我们需要理解HTML中的`&lt;select&gt;`元素和`&lt;option&gt;`子元素。`&lt;select&gt;`用于创建下拉列表,`multiple`属性使得...

    js, jQuery实现全选、反选功能.docx

    在JavaScript和jQuery中,全选和反选功能是常见的交互设计,主要用于用户界面中的复选框操作。在表格、列表或者其他需要多选的场景中,全选和反选功能能够大大提高用户体验。以下将详细介绍如何使用JavaScript和...

    多选框全选反选

    本篇文章将详细介绍如何利用JavaScript实现多选框的全选和反选功能。 #### 一、理解需求 根据提供的描述:“多选框全选和反选,用js做的,多选框单选和反选,和使用的代码”,我们可以明确以下几点: 1. **目标**...

    纯javascript实现选择框的全选与反选功能

    总结来说,纯JavaScript实现选择框的全选与反选功能主要涉及以下步骤: 1. 获取HTML中的复选框元素。 2. 为全选/反选的主复选框添加点击事件监听器,根据其状态更新子复选框的状态。 3. 为每个子复选框添加点击事件...

    js实现复选框的全选和取消全选效果

    JavaScript 实现复选框全选和取消全选的效果是一个常见的前端交互功能,广泛应用于数据筛选、表单提交等场景。本文将深入解析如何利用 JavaScript 和 jQuery 来完成这一功能。 首先,HTML 结构中通常会有一个全选...

    JS实现的全选、全不选及反选功能【案例】

    以上代码展示了如何使用纯JavaScript实现复选框的全选、全不选和反选功能。在实际应用中,可能还需要考虑其他因素,如性能优化(例如,使用事件委托而不是为每个按钮添加监听器),或者在某些情况下,使用更现代的...

    纯JS+HTML写的checkBox Tree 级联选中 好用无BUG

    综上所述,这个"纯JS+HTML写的checkBox Tree 级联选中"实例是一个实用的前端组件,它实现了级联选中的核心功能,且没有明显的BUG。开发者可以依据这个基础进一步扩展,例如添加异步加载数据、拖放排序、节点展开/...

    JS实现复选功能大全。仅供大家参考

    这是一个针对作业板系统的通用JavaScript文件,该系统主要依赖于`jQuery.js`库。这意味着在使用这个JS文件中的功能时,必须确保页面中已经包含了jQuery库。 #### 2.2 CheckBox全选/反选操作 这是文件的主要功能,即...

    实现ztree树形的js和css

    它结合了JavaScript和CSS,提供了丰富的配置选项和功能,如多选、单选、部分选以及全选功能。下面我们将详细探讨如何实现ZTree的这些功能。 首先,ZTree的核心是JavaScript,它基于jQuery库,因此在使用前需确保...

    纯JS实现前端购物车案例.rar

    购物车案例功能介绍:1、添加购物车,清单库存数量会对应减少,库存不足会警告;2、从购物车删除,库存将返回清单,总价相应变化;3、点击"-",数量会返回到清单库存;4、点击"+",清单中库存会减少,库存不足会警告...

    动态增删表格行(纯JS写法) 归档

    本文将详细讲解如何使用纯JavaScript实现这一功能,无需依赖任何外部库如jQuery或其他框架。 一、HTML基础结构 首先,我们需要创建一个基本的HTML表格结构。这通常包括一个表格元素`&lt;table&gt;`,以及若干行`&lt;tr&gt;`和...

    javascript实现商品购物车功能

    纯javascript实现购物车,完成从商品页向购物车中添加商品,购物车中删除商品,更改商品数量,删除商品,全选单选等购物车操作,涉及到javascript中BOM,DOM,json,cookie等知识点的应用操作,综合性较强,对于...

    一个基于纯js实现的左右(或上下)DubalListBox控件操作程序例子代码

    接下来是`SelectList.js`,这是实现Dubal ListBox功能的核心脚本。在这个文件中,开发者会定义一些关键函数来处理用户的交互事件,例如: 1. `init()`:初始化控件,可能包括设置初始值、绑定事件监听器等。 2. `...

    JQuery实现购物车功能纯JQuery

    在本文中,我们将深入探讨如何使用JavaScript库JQuery来实现一个基本的购物车功能。购物车功能是电子商务网站的核心组成部分,它允许用户选择并管理他们打算购买的商品。在这个实例中,我们将关注全选商品功能以及...

    C#实现删除所选(源码)

    全选功能允许用户一键选中列表或表格中的所有项目,通常在数据管理或批量操作的场景下非常实用。在C#和ASP.NET中,全选功能可以通过在前端HTML页面设置一个复选框,并在后端处理事件来实现。当用户点击这个复选框时...

Global site tag (gtag.js) - Google Analytics