关于checkbox全选与反选的问题

在一组checkbox中常有这样的需求,选择全选按钮,所有的选项必须全选上,当再次点击时,则所有的按钮必须反选,当点击一组checkbox时,只有有一个不选上,则按钮不选中,当所有的按钮全部选上时,此时全选按钮就选上,具体代码的思路如下:

1:触发全选按钮获取全选按钮的checked布尔值,将全选按钮的全选布尔值传给其他子序列checkbox,从而控制所有的checkbox

2:触发所有子选项checkbox,循环选择所有子选项的checkox布尔状态,当所有的子选项checkbox只要一项不选中时,则全选按按钮布尔值为false,否则全选中,全为true;

 <div class="box">
		<label><input type="checkbox" name="checkAll"/><span>全选</span></label>
		<label><input type=‘checkbox‘ name="items"/>音乐</label>
		<label><input type=‘checkbox‘ name="items"/>篮球</label>
		<label><input type=‘checkbox‘ name="items"/>足球</label>
		<label><input type=‘checkbox‘ name="items"/>排球</label>
		<label><input type=‘checkbox‘ name="items"/>举重</label>
</div>

 

var checkAllDom = document.querySelector("input[name=‘checkAll‘]");
		var spanDom = document.getElementsByTagName("span")[0];
		var items = document.getElementsByName("items");
		checkAllDom.onclick = function(){
			var isFlag = this.checked;
			checkAll(isFlag);
		};
		//全选
		function checkAll(flag){
			if(flag){
				for(var i=0;i<items.length;i++){
					//debugger;
					items[i].checked = true;
				}
				spanDom.innerText = "全选"
			}else{
				for(var i=0;i<items.length;i++){
					items[i].checked = false;
				}
				spanDom.innerText = "反选"
			}
		};
		//单选控制
		for(var i=0;i<items.length;i++){
			items[i].onclick = function(){
				var flag = true;//定义一个开关
				//alert(this.checked)
				for(var i=0;i<items.length;i++){
					if(items[i].checked ==false){//只要有一个为false,则为false
						flag = false;
						console.log(1);
					};
					if(flag){
						checkAllDom.checked = true;
					}else{
						checkAllDom.checked = false;
					}
				};

			};

		}

  对应单选与全选效果如下:

时间: 2024-11-10 07:27:06

关于checkbox全选与反选的问题的相关文章

checkbox 全选,反选 ,全不选

在表格或者列表中经常会遇到要全选或者反选等交互,今天总结了一下代码,保留着以后直接拿来用 原理: 1. 全选:当全选checkbox被点击(不管点击之前是什么状态)后,获取其checked状态.然后对列表进行循环检测,此时可以将所有的(无论之前什么状态),设为选中,也可对未选中的进行选中. 2. 反选:当反选checkbox被点击(不管点击之前是什么装填)后,获取其其状态值,对列表进行循环检测,将被检测的元素的checked状态反向处理,即可. 3. 列表全选或者不全选:当列表中的任意一个che

checkbox全选,反选,取消选择 jquery

checkbox全选,反选,取消选择 jquery. //checkbox全部选择 $(":checkbox[name='osfipin']").each(function(){ $(this).attr("checked",true); }); //checkbox取消全选 $(":checkbox[name='osfipin']").each(function(){ $(this).attr("checked",false

练习-checkbox 全选 ,反选, 单选,以及取值

1.方法1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>全选与反选</title> <meta http-equiv="Content-Type" content="te

angular checkbox 全选和反选功能

最近做写出了angularjs 全选和反选的数据绑定功能,分享出来给大家,有什么不对的地方请大家多多指教,angularjs 强大的数据绑定功能完全展现了新一代的web 开发的,完美的和html 应用在一起,实现新一代的技术完美结合.废话就不多说了,下面看代码: 1.html 页面: <table class="table" >    <!--主机组主机列表-->    <tr style="background-color: #555555;c

checkbox全选和反选功能

用jQuery实现checkbox的全选和反选功能,当checkbox禁用时候不参与全选功能 <!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,inp

html checkbox 全选与反选

之所以记录这个博客,是因为我完全用jquery,无法实现自己想要的结果(通过一个checkbox的选中或不选中控制其他多个checkbox状态) <input type="checkbox" name="test" />圣诞节 <input type="checkbox" name="test" />股市 <input type="checkbox" name="te

js CheckBox 全选、反选

<h3>你最喜欢的水果是?</h3> <label><input type="checkbox"/>苹果</label> <label><input type="checkbox"/>香蕉</label> <label><input type="checkbox"/>梨</label> <label>&l

Android实战简易教程-第五十一枪(ListView实现子控件的动态显示和隐藏、checkbox全选和反选)

前段时间写过一篇文章:Android实战简易教程-第四十七枪(ListView多选-实现点餐系统)有的同学留言建议,可不可以动态控制checkbox的显示和全选反选功能,我研究了一下,发现实现也比较容易,特写下此篇文章.学习就是要有发散思维,要举一反三,大家也可以根据我的实例进行改编,添加和删除一些功能,这样可以提高你对知识的认知!下面我们看一下代码: 1.main.xml: <?xml version="1.0" encoding="utf-8"?>

JQuery实现的 checkbox 全选、反选。

1. 全选的checkbox选中时,子checkbox全部选中.反之,全部不选 2.子checkbox中,只要有没有被选中的,取消全选checkbox的选中 3.子checkbox的数量和子checkbox被选中的数量一样时,全选checkbox要被选中 [javascript] view plain copy //复选框事件 //全选.取消全选的事件 function selectAll(){ if ($("#SelectAll").attr("checked")