`

checkbox 全选反选

 
阅读更多

html:

<div>

 <p>
	 <input type="checkbox" name="checkbox" id="all">all
	 <br>
	 <input type="checkbox" name="checkbox1" class="subcheck">A
	 <input type="checkbox" name="checkbox1" class="subcheck"> B
	 <input type="checkbox" name="checkbox1" class="subcheck">C
 </p>

 <p>
	 <input type="checkbox" name="checkbox1" class="subcheck">D
	 <input type="checkbox" name="checkbox1" class="subcheck">E
	 <input type="checkbox" name="checkbox1" class="subcheck">F
 </p>
</div>

 

 

 

script:

 

 

$(function(){

	$("#all").click(function(){
		if($(".subcheck:checked").length > 0){
			$(".subcheck").each(function(){
				$(this).prop("checked",false);
			})
			$(this).prop("checked",false);
		}else{
			$(".subcheck").each(function(){
				$(this).prop("checked",true);
			})
			$(this).prop("checked",true);
		}
		//alert($(".subcheck:checked").length);
	
	})

	$(".subcheck").click(function(){
		//alert($(".subcheck:checked").length);
		if($(".subcheck:checked").length > 0 && $(".subcheck:checked").length < $(".subcheck").length){
			if($("this").prop("checked")){
				$("this").prop("checked",false);
			}else{
				$("this").prop("checked",true);
			}
			var allBox = document.getElementById("all");
			allBox.indeterminate =true;
		}else if($(".subcheck:checked").length == 0){
			if($("this").prop("checked")){
				$("this").prop("checked",false);
			}else{
				$("this").prop("checked",true);
			}
			var allBox = document.getElementById("all");
			allBox.indeterminate =false;
			$("#all").prop("checked",false);
			
		}else if( $(".subcheck:checked").length == $(".subcheck").length){
			if($("this").prop("checked")){
				$("this").prop("checked",false);
			}else{
				$("this").prop("checked",true);
			}
			var allBox = document.getElementById("all");
			allBox.indeterminate =false;
			$("#all").prop("checked",true);
		}
	
	})

	
});

 

 

分享到:
评论

相关推荐

    android checkbox全选反选

    "Android CheckBox全选反选"这个话题主要涉及如何在ListView中实现CheckBox的选择与反选择操作,包括全选和反选的功能。ListView是Android系统提供的一种列表视图,它可以显示大量数据并允许用户进行交互。下面我们...

    DataGridView标头CheckBox全选反选

    而在这个特定的场景中,我们需要实现一个增强的功能:在`DataGridView`的列头添加一个`CheckBox`,通过这个`CheckBox`可以实现所有行中对应复选框的全选或反选操作。这个功能在数据管理界面中十分常见,例如在批量...

    Checkbox全选反选.html

    Checkbox全选反选.html

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

    以下是三种实现Checkbox全选和反选的方法,以及它们的JavaScript和Java实现细节。 ### 方法一:使用`checked`属性 **JavaScript实现**: 在JavaScript中,可以通过获取全选按钮的`checked`属性来控制所有复选框的...

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

    ### jQuery与JavaScript操作Checkbox全选反选 #### 一、引言 在Web开发中,Checkbox(复选框)是一种非常常见的用户界面元素,用于收集用户的多选输入。尤其是在表单设计时,Checkbox的全选与反选功能极大地方便了...

    DataGridView表头添加checkbox实现全选反选

    在Windows应用程序开发...总之,`DataGridView`表头添加`CheckBox`实现全选反选涉及了控件创建、事件处理、数据绑定以及用户交互等多个方面。理解这些知识点可以帮助开发者更有效地构建功能丰富的数据查看和编辑界面。

    android checkBox全选 反选

    本文将详细讲解如何实现CheckBox的全选和反选功能,并结合提供的"android checkBox全选 反选"的标题和描述,以及相关的标签,我们将探讨具体的实现策略。 首先,我们需要理解CheckBox的基本用法。在XML布局文件中,...

    checkbox全选反选与批量删js+asp源码

    本示例“checkbox全选反选与批量删js+asp源码”提供了一个结合JavaScript和ASP技术来实现这一功能的解决方案。 首先,我们来看JavaScript部分。JavaScript是一种运行在浏览器端的脚本语言,它用于控制网页的动态...

    js checkbox全选 反选 取消全部设置表单html复选框

    "js checkbox全选 反选 取消全部设置表单html复选框"这个标题描述了一个常见的功能需求,即通过JavaScript控制HTML中的复选框(checkboxes),实现全选、反选和取消全部选中的功能。在本文中,我们将深入探讨如何...

    js checkbox全选 反选 取消全部设置表单checkbox复选框勾选

    本篇文章将详细讲解如何利用JavaScript实现`checkbox`的全选、反选和取消全部功能,以及相关的代码示例。 ### 1. `checkbox`基本概念 `checkbox`在HTML中通过`&lt;input type="checkbox"&gt;`标签创建。默认情况下,`...

    checkbox全选反选与批量删除附源码

    **一、Checkbox全选与反选** 1. **Checkbox基本概念**:Checkbox是HTML中的一种表单元素,用于用户输入布尔值(即“选中”或“未选中”)。通过设置`checked`属性,可以默认选中一个复选框。 2. **全选功能**:在...

    模拟select带checkbox全选反选取消插件tomcat发布使用

    这个“模拟select带checkbox全选反选取消插件”是一个专门为了解决这个问题而设计的工具。它允许用户通过复选框(checkbox)进行多选操作,并提供了全选、反选和取消选择的功能,极大地方便了用户交互。 首先,让...

    checkbox实现全选和反选经典例子

    在高级控件如DataGridView中,通过结合Checkbox可以实现全选和反选功能,为用户提供便捷的操作方式。这个经典例子将深入探讨如何在Web应用中实现这一功能。 1. **Checkbox基本概念** Checkbox是HTML中的一个表单...

    checkbox全选,反选,选特定的值

    js原生,checkbox全选,反选,选特定的值。jq会更简单。。初学时候比用的

    jquery Checkbox 全选 反选 全不选 多种实现方法

    在涉及到表单元素如复选框(Checkbox)时,经常需要实现全选、反选和全不选的功能。下面将详细探讨 jQuery 如何实现这些功能,以及如何进行表单验证。 1. **全选功能** 要实现全选功能,首先我们需要一个主复选框...

    WPF CheckBox全选、反选比较通用

    本教程将详细介绍如何在WPF中实现CheckBox的全选和反选功能。 首先,我们需要理解CheckBox的基本用法。在XAML中,我们可以创建一个CheckBox并为其设置文本和初始状态: ```xml &lt;CheckBox Content="全选" x:Name=...

    Flex中DataGrid内嵌CheckBox的全选反选和防止选择状态错乱实现方法

    以上就是Flex中DataGrid内嵌CheckBox实现全选反选及防止选择状态错乱的基本步骤。通过自定义列类、监听CheckBox事件和处理全选/全反逻辑,我们可以创建一个功能完善的多选DataGrid。在实际项目中,还可以根据需求...

    JS实现checkbox的全选和反选

    资源名称:JS实现checkbox的全选和反选资源截图: 资源太大,传百度网盘了,链接在附件中,有需要的同学自取。

    jquery全选反选插件

    本话题将深入探讨“jQuery全选反选插件”的相关知识点,这对于构建具有复选框全选和反选功能的用户界面非常有用。 首先,jQuery全选反选插件的核心功能是实现复选框的批量选择。在网页上,当用户需要对一组选项进行...

    Javascript实现全选反选

    在JavaScript编程中,"全选反选"功能是常见的用户交互设计,常见于表格或列表数据的批量操作中。这个功能允许用户一键选择或取消选择所有项目,极大地提高了操作效率。下面将详细介绍如何使用JavaScript来实现这个...

Global site tag (gtag.js) - Google Analytics