您的位置:首页 > Web前端 > JQuery

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

2017-08-10 08:50 405 查看
动态生成多行复选框

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"
});
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  ajax jquery