javascript - 点击checkbox触发form表单提交事件
如上图,点击checkbox时,下面的商品做出相应的涮选,再次点击时,取消之前筛选的限制项。
我现在要做的是,当点击checkbox时,触发form表单提交事件,将checkbox的状态(0或1)通过GET传入后台做判断。
这里应该怎么改尼?求教
如果不用表单,用AJAX我也不是没想过,因为图上的 “销量”“人气”“价格”那些按钮,以及商品下面的分页我也没有用AJAX,所以怕数据取得有问题
回复内容:
如上图,点击checkbox时,下面的商品做出相应的涮选,再次点击时,取消之前筛选的限制项。
我现在要做的是,当点击checkbox时,触发form表单提交事件,将checkbox的状态(0或1)通过GET传入后台做判断。
这里应该怎么改尼?求教
如果不用表单,用AJAX我也不是没想过,因为图上的 “销量”“人气”“价格”那些按钮,以及商品下面的分页我也没有用AJAX,所以怕数据取得有问题
题主修改了问题,我也相应修改下答案。
类别情况总共有 默认default,价格value,销量num,人气hot,海外直邮mail,海关发货customs。
情景一般是这样的,
第一次获得请求的时候 url请求拼参数?default=1,data请求数据只有一个default,
var default=1; data:{"default":default}
当选择价格,销量,人气中的一个或多个的时候 给value,num,hot三个变量设置值,
当勾选海外直邮,或者海关发货中的一个时候,设置mail为1,
var value = 0,
num = 1,
hot = 1; //1代表正序,0代表倒序
var mail = 1,
customs = 0; //1.代表勾选,0代表不勾选
...
data:{
"value":value,
"num":num,
"hot":hot,
"mail":mail,
"customs":customs
}
原理差不多如此,建议请求的数据可以使用前端模版进行数据拼接。比如artTemplate,
修改前
使用ajax表单提交吧。
if ( checkbox.checked == true){
checkobx = 1
}else{
checkobx = 0
}
//Action for checked
$.ajax({
url: "/",
type: "post",
data: {"checkbox":checkbox}, //状态不同,checkbox的值不同 为0或者1
dataType: "json",
success: function(data){
//根据返回的状态值判断,然后刷新加载数据
}
jQuery:
$("form").submit();
JavaScript:
form.submit();
一般来说这种功能应该用 Ajax 来做——谁都不希望勾选一个 checkbox 把整个页面都刷掉
如果硬要 submit 0 和 1 的话,就配合 hidden input 来做好了