最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
jQuery通过数组存储关联值显式操作Checkbox
时间:2022-06-25 17:41:09 编辑:袖梨 来源:一聚教程网
应用场景:当需要由多个表数据关联得到某一具体数值时,下例是一种解决的思路和方案。
/**
* 显式选中清空Checkbox(jQuery代码)
*
*/
var obj = $(':checkbox');
obj.on('click',function(){
oThis = $(this);
if(oThis.attr('selected') == 'selected'){
oThis.removeAttr('selected');
}else{
oThis.attr({'selected':true});
}
});
/**
* 注:如果是点击按钮(不直接点击Checkbox)触发事件,先取消可见勾选,再清除显式的属性勾选
*
* 如:$(':checkbox').each(function(){
* if($(this).attr('selected') == 'selected')
* {
* $(this).attr('checked', false); //取消可见的勾选
* $(this).removeAttr('selected'); //取消显式的属性勾选
* }
* });
*/
/**
* 显式将Checkbox和隐藏值存入数组(jQuery代码)
*
*/
var info = {"discount" : {"discount_id" : [], "discount_lesson_id" : []}};
infoDiscountId = info['discount']['discount_id'];
infoDisLessonId = info['discount']['discount_lesson_id'];
$('input[name="discount_id"]').on('click', function(){
var oThis = $(this);
if(oThis.attr('selected') == 'selected'){
oThis.removeAttr('selected');
$.each(infoDisLessonId, function(i, n){
if(infoDisLessonId[i] == oThis.prev('input').val()){
delete infoDisLessonId[i]; //唯一性删除
j = i; //对应DiscountId中的i
}
});
delete infoDiscountId[j];
console.log(info);
}else{
oThis.attr({'selected':true});
infoDiscountId.push(oThis.val()); //数组新增元素
infoDisLessonId.push(oThis.prev('input').val()); //新增元素2
console.log(info);
}
});
/*存在问题:
* 1.删除infoDisLessonId[i]时,虽然元素分别在infoDiscountId 和 infoDisLessonId中,但如果碰到它们当中有相同值,此时都将删除,这是所不希望发生的。
* 2.使用delete infoDiscountId[i]此种形式的删除时,原数组长度不变,索引还在,只是当前infoDiscountId[i]值变为undefined。
*/
/**
* 解决例2当中的存在问题,更换数组格式储值(jQuery代码)
*
*/
var info = {"discount" : []};
infoDiscountId = info['discount'];
$('input[name="discount_id"]').on('click', function(){
var oThis = $(this);
if(oThis.attr('selected') == 'selected'){
oThis.removeAttr('selected');
$.each(infoDiscountId, function(i, n){
if(infoDiscountId[i]['discount_id'] == oThis.val() && infoDiscountId[i]['discount_lesson_id'] == oThis.prev('input').val())
{
//删除前进行唯一性判断,参考添加时的存储方式
infoDiscountId.splice(i, 1); //使用splice删除单个元素,代替delete
}
});
console.log(info);
}else{
oThis.attr({'selected':true});
infoDiscountId.push({"discount_id":oThis.val()}); //push在数组末尾添加一对数组元素,discount_id
var index = infoDiscountId.length - 1; //获得新增元素的索引
infoDiscountId[index]['discount_lesson_id'] = oThis.prev('input').val(); //在此索引下再增加一对数组元素,discount_lesson_id
console.log(info);
}
});
/*
* 完美解决例2中存在的问题
*/
相关文章
- 无限暖暖搭乘大鸟巴士怎么玩 公测第三天每日任务做法介绍 12-27
- 奇迹暖暖绚光护佑搭配攻略 奇迹暖暖绚光护佑过关攻略 12-27
- 绝区零月城柳意像影画怎么样 12-27
- 无限暖暖翩翩愿飞去怎么样 12-27
- 黑神话悟空1.0.12.16581版本更新公告 12-27
- 光遇12.27红石碎片在哪里 12-27