实现购物车,多选功能,选择已选中的进行结算。
思路:
1、前端点击后状态,刷新页面后还保存着状态。
2、每点击一次chekbox,传送一次数据。
3、后台接收传送的数据。
前端部分
<input class="check" type="checkbox" value="{{ product.cart_id }}" name="cb" οnchange="cart_select();" />
<script>
function cart_select() {
var
$box = $("[name='cb']:checked"),
val = '';
$.each($box,function (i,v){ //循环每个value值赋给 val
val += i > 0 ? ","+v.value : v.value;
});
$.ajax({
url: 'index.php?route=checkout/cart/select',
type: 'post',
dataType: 'json',
data: {data:val}, // data = 1,2,3,4传递给了后台
beforeSend: function() {
$('#cart > button').button('loading');
},
success: function(json) {
alert(val); //成功后打印 val的值
},
error: function(xhr, ajaxOptions, thrownError) {
alert("发生错误");
}
});
}
}
</script>
//记录checkbox状态在 cookie中,刷新页面后,也保持已被选中情况
<script type="text/javascript">
var dv = document.getElementById('dvCBs'), cbs = dv.getElementsByTagName('input');
dv.onclick = function (e) {
e = e || window.event;
var o = e.target || e.srcElement;
if (o.type == 'checkbox') {
var vs = '';
for (var i = 0; i < cbs.length; i++)
if (cbs[i].checked) vs += ',' + cbs[i].value;
document.cookie = 'vs=' + vs.substring(1);//存储选中的checkbook的值
}
}
var m = /(^| |;)vs=([^;]+)/.exec(document.cookie);
if (m) {//cookie中有值,初始化勾选状态
var arr = m[2].split(',');
for(var j=0;j<arr.length;j++)
for(var i=0;i<cbs.length;i++)
if (cbs[i].value == arr[j]) { cbs[i].checked = true; break;}
}
</script>
PHP部分
$test = $_POST['data'];
print($test);