复选框的全选和全不选以及复选框动态拼接提交复选框结果

最新推荐文章于 2022-09-30 10:23:44 发布

gebozhedao

最新推荐文章于 2022-09-30 10:23:44 发布

阅读量475

点赞数

本文链接：https://blog.csdn.net/gebozhedao/article/details/71131586

版权

写代码经常遇到要在前台页面上拼接复选框，再提交，这里写下自己的方法，仅供自己以后找方便

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<script type="text/javascript" src="js/jquery-1.8.0.js"></script>

	<body>
		<div id="d1">
			<input type="checkbox" id="checkAll" οnclick="checkAll()"/>全选
			<hr />
		</div>
		<div id="d2">
			<input type="checkbox"  class="subCheck" οnchange="cancel(this)" value="1"/> 选项1
			<br />
			<input type="checkbox"  class="subCheck" οnchange="cancel(this)" value="2"/> 选项2
			<br />
			<input type="checkbox"  class="subCheck" οnchange="cancel(this)" value="3"/> 选项3
		</div>
		
		<div id="d3">
			<input type="button" value="确定" οnclick="mySubmit()"/>
			
		</div>
		
	</body>
	<script>
		$(function(){
			
		})
		
		function checkAll(){ ///实现全选和全不选功能
			var allchecked  = $("#checkAll")[0].checked;
			var checkboxs = $(".subCheck");
			$.each(checkboxs,function(index,item){
				item.checked = allchecked;
			})
		}
		
		function cancel(){ ///实现取消任意一个子选项选中时，自动去掉全选的选中状态
			if(!this.checked){
				$("#checkAll")[0].checked = false;
			}
		}
		
		///提交方法
		function mySubmit(){
			//获取所有选中的复选框对象
			var checkeds = $(".subCheck:checked");  ///从class为subCheck的元素中选择被勾选的
//			var checkeds = $(".subCheck :checked");  ///注意：这样写是错的，空格代表后代元素，
//这句话的意思是从class为subCheck的元素的子元素【准确说，这里是 后代元素】中选择被勾选的，所以结果是错的
//			var checkeds = $("#d2 :checked"); ///这样写也可以
			
			if(checkeds.length==0){
				alert("请选择复选框！");
				return;
			}
			var checkedId = "";
			for(var i=0;i<checkeds.length;i++){
				var id = checkeds[i].value;
				checkedId+=id+",";
			}
			checkedId = checkedId.substring(0,checkedId.length-1);//去掉最后的逗号，
			var  data = "";
			data += "&checkedIds="+checkedId;
			alert("data: "+data);
			/*  下面可以写 ajax 方法请求后台
			 $.ajax({
				url:"",
				data:data,
				async:true
				success:function(response){
					
				}
			});*/
		}
		
		///动态拼接标签  下面是伪代码仅供思路参考
		function add(){
			//ajax 请求来的list集合中的数据
			var list = "";
			var str = "";
			if(list){  //如果list有值不为null啊 undefined啥的
				for(var i=0;i<list.length;i++){  ///当然，用其他的各种遍历方式也都可以
					var unit = list[i];
					str="<input type='checkbox'  class='subCheck' οnchange='cancel(this)' value='"+unit.id+"/> 选项3";
					$("#d2").append(str);
				}
			}
		}
		
	</script>

</html>
<!--
	注意：如果子选项都是js自动生成的，那么建议在拼接时就像上面那样把onchange方法拼接上去，否则如果用bind方法
	绑定click事件，有时会无效，原因暂时还不清楚。
	
	然后发完请求后，springMVC Controler中可以直接用一个字符串 String checkedIds 作为参数接收这个值。
	然后再用split（“,”）切割再处理即可。
	
	如果要动态拼接复选框，可以参考上面 add方法
-->

仅供参考，如有错误，欢迎指正，新手一枚

gebozhedao

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复选框的全选和全不选以及复选框动态拼接提交复选框结果

写代码经常遇到要在前台页面上拼接复选框，再提交，这里写下自己的方法，仅供自己以后找方便全选选项1 选项2 选项3 $(function(){ }) function checkAll(){ /
复制链接

扫一扫