用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"
});
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"
});
相关文章推荐
- web使用jq实现复制功能
- Android中Webview与原生界面交互及二维码扫描功能实现
- vue基于element-ui的三级CheckBox复选框功能的实现代码
- 用session实现简单的购物车功能
- vue.js实现简单的购物车功能
- 购物车(只实现了提交订单前的功能)
- Android-RecyclerView--实现一级购物车简单功能
- java web开发_购物车功能实现
- CEF3实现js与C++交互功能, Render进程中OnContextCreated绑定与OnWebKitInitialized的js扩展无法回调
- jQuery实现购物车功能
- 基于CI(CodeIgniter)框架实现购物车功能的方法
- Android开发使用json实现服务器与客户端数据的交互功能示例
- maven项目配置redis,实现购物车功能
- 实现购物车功能
- 基于JavaScript实现购物车功能
- 前台中使用JQ的 post方法跳转页面 实现企业中的 增改查的功能
- Vue实现购物车功能
- jquery实现购物车数量加减,价格计算功能
- jq实现最多复选框,js数组操作实践。
- Rxjava+Retrofit+MVP实现购物车功能