`
yeahfeng
  • 浏览: 17350 次
  • 性别: Icon_minigender_1
  • 来自: 重庆
社区版块
存档分类
最新评论

复选框全选、不选切换

 
阅读更多

js代码:

 

 

//复选框全选、不选切换
function checkChg(allId,subName) {
    var subIds = document.getElementsByName(subName);
    //全选
	if(document.getElementById(allId).checked==true){
	    for (var j = 0; j < subIds.length; j++) {
	        if (subIds.item(j).checked == false) {
	        	subIds.item(j).checked = true;
	        }
	    }
	}else{//全不选
	    for (var j = 0; j < subIds.length; j++) {
	        if (subIds.item(j).checked == true) {
	        	subIds.item(j).checked = false;
	        }
	    }
	}

}
 

 

HTML调用:

 

 

  	<input type="checkbox" name="all" id="all" onclick="checkChg('all','checkbox')" />
    <input name="test" value="复选框1" type="checkbox" />复选框1<br />
    <input name="test" value="复选框2" type="checkbox" />复选框2<br />
    <input name="test" value="复选框3" type="checkbox" />复选框3<br />
    <input name="test" value="复选框4" type="checkbox" />复选框4<br />
    <input name="test" value="复选框5" type="checkbox" />复选框5<br />
    <input name="test" value="复选框6" type="checkbox" />复选框6<br />
分享到:
评论

相关推荐

    复选框全选全不选JS代码

    本文将深入探讨“复选框全选全不选JS代码”的实现原理、应用场景以及如何优化这段代码,以便开发者能够更好地理解和运用到实际项目中。 ### 复选框全选与全不选的概念 复选框(Checkbox)是Web表单中常见的元素,...

    复选框全选、全不选和反选的效果实现.rar

    本资源"复选框全选、全不选和反选的效果实现.rar"聚焦于JavaScript(JS)实现复选框的全选、全不选和反选功能,这对于创建交互性强、用户体验良好的网页表单至关重要。全选、全不选和反选功能使得用户可以便捷地管理...

    vue+vant-UI框架实现购物车的复选框全选和反选功能

    ### Vue+Vant-UI框架实现购物车复选框全选和反选功能 #### 1. 概述 在电商类应用中,购物车模块是用户进行商品选购时的重要组成部分。其中,复选框全选和反选功能可以帮助用户快速选择或取消选择购物车中的全部商品...

    js实现全选的复选框

    2. 交互反馈:为了提供更好的用户体验,可以在全选复选框的状态改变时更新其文字提示,如“全选”变为“全不选”,反之亦然。 3. 动态加载:如果复选框是动态加载的,可以通过事件委托实现全选功能。将事件监听器...

    react实现复选框全选和反选组件效果

    在React开发中,实现复选框全选和反选功能是一项常见的需求,特别是在表单或者数据筛选场景下。本文将详细解析如何通过React组件来实现这一功能。 首先,我们需要创建一个名为`List`的React组件。这个组件会包含一...

    treeview 复选框 三种状态

    TreeView控件的复选框功能允许用户对节点进行选择,而不仅仅是单击或展开/折叠。复选框通常有三种状态:未选中(Unchecked)、选中(Checked)和部分选中(Indeterminate)。未选中状态表示用户未选择该节点,选中...

    js html css实现复选框全选与反选

    复选框全选功能是指当一个总复选框被选中时,页面上所有的复选框都将被选中;反选功能是指当一个反选复选框被选中时,所有未选中的复选框将被选中,而所有已选中的复选框将被取消选中。 首先,HTML部分通过标签创建...

    js实现复选框和单选框的选择

    本文将详细介绍如何使用JavaScript来控制这些表单元素的状态,包括实现单个复选框的选择切换、全选/全不选功能以及检查所有选项的状态。 #### 重要概念解释 1. **复选框**:允许用户选择一个或多个选项。 2. **...

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

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

    实现复选框全选/全不选切换

    &lt;input type=checkbox name=mm value=a onclick=”checkItem(this, ‘mmAll’)”&gt; &lt;input type=checkbox name=mm value=b onclick=”checkItem(this, ‘mmAll’)”&gt; &lt;...

    带复选框(checkbox)的树

    在IT界,"带复选框(checkbox)的树"是一种常见的用户界面元素,它将树形结构的数据与复选框相结合,为用户提供了一种直观、便捷的方式来选择、操作和组织层次化的数据。这种控件通常用于文件管理器、设置菜单、数据库...

    JavaScript复选框相关函数

    复选框的处理涉及到多种函数,特别是当涉及到“全选”和“全不选”功能时,这些函数就显得尤为重要。下面我们将深入探讨与复选框相关的JavaScript函数以及如何实现全选和全不选的功能。 一、HTML中的复选框 在HTML...

    ListView添加CheckBox复选框

    本篇文章将详细讲解如何在ListView中实现CheckBox复选框的功能。 首先,我们需要创建一个自定义的ListView适配器。适配器是连接数据源和ListView的关键,它负责将数据转化为可显示的视图。创建一个继承自`...

    js复选框(checkbox)

    实现全选/全不选功能,通常需要一个主控复选框,当它被选中时,所有关联的子复选框都被选中。可以使用JavaScript事件监听器(如`addEventListener`)来实现这个功能: ```javascript const allCheckbox = ...

    jquery全选反选全不选案例

    使用 jQuery 绑定点击事件到 "全选" 复选框,并在事件处理函数中切换子复选框的状态。 ```javascript $(document).ready(function() { $("#selectAll").click(function() { $(".childCheckbox").prop('checked',...

    vue+elementui实现下拉框增加checkbox并可全选或取消(完整案例及效果图).zip

    在这个特定的案例中,我们关注的是如何使用Element UI来实现一个带有复选框(checkbox)的下拉框(select),并且支持全选和取消全选的功能。下面将详细介绍这一功能的实现步骤和关键知识点。 首先,我们需要在项目...

    复选框的使用

    在本示例中,我们探讨的是如何实现复选框的功能,包括全选、全不选、反选以及获取选中状态的操作。这些功能在很多应用中都非常实用,例如在表单填写、设置配置或者多选项选择时。 首先,我们要了解复选框的基本概念...

    复选框多选Demo

    在多选Demo中,如果单选按钮用于切换全选/全不选功能,那么需要监听单选按钮的改变事件,并相应地更新所有复选框的状态。 5. **Adapter与ViewHolder**: 实现复选框多选功能通常结合ListView、RecyclerView等滚动...

    Android在recycleview中进行全选和取消全选

    在实际应用中,我们经常需要实现全选和取消全选的功能,特别是在涉及到多选操作的场景,如文件管理、联系人选择等。本教程将详细讲解如何在RecyclerView中实现全选和取消全选,并获取已选择的数据。 首先,我们需要...

    QT的QTreeWidget有checkbox时轻松选中

    如果不是,就切换所有列的复选框状态。这样,无论用户点击行的哪个位置,复选框都会根据当前状态反选。 在实际项目中,你可能还需要考虑其他因素,比如多选模式下的行为、键盘操作、以及是否需要阻止事件的进一步...

Global site tag (gtag.js) - Google Analytics