用jq实现购物车复选框的交互功能

动态生成复选框与AJAX交互

最新推荐文章于 2023-08-30 21:53:10 发布

小秋蜀黍

最新推荐文章于 2023-08-30 21:53:10 发布

阅读量2.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： jquery ajax 文章标签： ajax jquery

本文链接：https://blog.youkuaiyun.com/sinat_32133675/article/details/77019231

ajax 同时被 2 个专栏收录

4 篇文章

订阅专栏

jquery

2 篇文章

订阅专栏

本文介绍了一种使用JavaScript动态生成复选框的方法，并实现与AJAX的交互来更新状态。通过监听主复选框和子复选框的状态变化，确保两者的一致性。同时展示了如何通过AJAX向后端传递数组形式的数据。

动态生成多行复选框

var count1=0;
var count2=0;

var t1 = $("#fun1");	 
$.getJSON("servlet/FindState",null,function(k){
$(k).each(function(i,n){
		count1++;
		t1.append("<tr><td align='left' style='padding-left:20px'><input class='xx1' type='checkbox'/>"+n.state+"</td></tr>");
	});	
});

var t2 = $("#fun2");
$.getJSON("servlet/FindType",null,function(k){
	
	$(k).each(function(i,n){
		count2++;
		t2.append("<tr><td align='left' style='padding-left:20px'><input class='xx2' type='checkbox'/>"+n.TYPE+"</td></tr>");
	});
});

点击主复选框，子复选框被点亮

$("#label1").click(function(){
	if($(this).prop("checked")){
		$(".xx1").prop("checked",true);
	}else{
		$(".xx1").prop("checked",false);
	}	
});
$("#label2").click(function(){
	if($(this).prop("checked")){
		$(".xx2").prop("checked",true);
	}else{
		$(".xx2").prop("checked",false);
	}	
});

当子复选框全部选中时，主复选框被选中；当子复选框都为选中时，主复选框取消选中；

var n11=0;

var arry1=new Array();
$("#fun1").on("click",".xx1,#label1",function(){
	
	if($(this).prop("checked"))
	{
	    arry1.splice(0,arry1.length);//清空数组
		//arry1.push($(this).parent().text());
		$(".xx1").each(function(i){
			   if($(this).prop("checked")){
				n11++;
				arry1.push($(this).parent().text());
			}
		});
		console.log(arry1);
		console.log(arry1.length);
		$.ajax({  
		    url : "servlet/Changestate",
		    traditional: true,
		    data : {"arry1" : arry1},  
		    type : "post"  
		});
		if(n11==count1)
		{
			//console.log(count1);//外面取不到值，这里取到值的未解之谜
			$("#label1").prop("checked",true);
			n11=0;
		}
		n11=0;
	}else{
		$("#label1").prop("checked",false);
	}	
});
var n12=0;

$("#fun2").on("click",".xx2,#label2",function(){
	
	if($(this).prop("checked"))
	{
		$(".xx2").each(function(){
			   if($(this).prop("checked")){
				n12++;
				//console.log(n12);
			}
		});
		if(n12==count2)
		{
			//console.log(count2);//外面取不到值，这里取到值的未解之谜
			$("#label2").prop("checked",true);
			n12=0;
		}
		n12=0;
	}else{
		$("#label2").prop("checked",false);
	}	
});

如何使用ajax向severlet传送一个数组类型的数据

$.ajax({  
		    url : "servlet/Changestate",
		    traditional: true,
		    data : {"arry1" : arry1},  
		    type : "post"  
		});