• 欢迎访问搞代码网站,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站!
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏搞代码吧

javascript – 点击checkbox触发form表单提交事件

php 搞代码 4年前 (2022-01-25) 21次浏览 已收录 0个评论
文章目录[隐藏]

<body>

如上图,点击checkbox时,下面的商品做出相应的涮选,再次点击时,取消之前筛选的限制项。
我现在要做的是,当点击checkbox时,触发form表单提交事件,将checkbox的状态(0或1)通过GET传入后台做判断。

<code>          <span class="com_checkBox">            <em></em>            <font><i class="hw_1"></i>海外直邮</font>         </span>         <span class="com_checkBox">             <em></em>             <font><i class="hg_1"></i>海关发货</font>         </span> <script type="text/javascript">        function checkboxOnclick(checkbox){         if ( checkbox.checked == true){         //Action for checked         }else{         //Action for not checked         }       }  </script></code>

这里应该怎么改尼?求教

如果不用表单,用AJAX我也不是没想过,因为图上的 “销量”“人气”“价格”那些按钮,以及商品下面的分页我也没有用AJAX,所以怕数据取得有问题

回复内容:

<body>

如上图,点击checkbox时,下面的商品做出相应的涮选,再次点击时,取消之前筛选的限制项。
我现在要做的是,当点击checkbox时,触发form表单提交事件,将checkbox的状态(0或1)通过GET传入后台做判断。

<code>          <span class="com_checkBox">            <em></em>            <font><i class="hw_1"></i>海外直邮</font>         </span>         <span class="com_checkBox">             <em></em>    <strong style="color:transparent">本文来源gao@daima#com搞(%代@#码@网&</strong><strong>搞gaodaima代码</strong>         <font><i class="hg_1"></i>海关发货</font>         </span> <script type="text/javascript">        function checkboxOnclick(checkbox){         if ( checkbox.checked == true){         //Action for checked         }else{         //Action for not checked         }       }  </script></code>

这里应该怎么改尼?求教

如果不用表单,用AJAX我也不是没想过,因为图上的 “销量”“人气”“价格”那些按钮,以及商品下面的分页我也没有用AJAX,所以怕数据取得有问题

题主修改了问题,我也相应修改下答案。

类别情况总共有 默认default,价格value,销量num,人气hot,海外直邮mail,海关发货customs。

情景一般是这样的,

  1. 第一次获得请求的时候 url请求拼参数?default=1,data请求数据只有一个default,var default=1; data:{"default":default}

  2. 当选择价格,销量,人气中的一个或多个的时候 给value,num,hot三个变量设置值,

  3. 当勾选海外直邮,或者海关发货中的一个时候,设置mail为1,

<code> 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 }</code>

原理差不多如此,建议请求的数据可以使用前端模版进行数据拼接。比如artTemplate,

修改前


使用ajax表单提交吧。

<code>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){      //根据返回的状态值判断,然后刷新加载数据  }</code>

jQuery:
$(“form”).submit();

JavaScript:
form.submit();

一般来说这种功能应该用 Ajax 来做——谁都不希望勾选一个 checkbox 把整个页面都刷掉
如果硬要 submit 0 和 1 的话,就配合 hidden input 来做好了


搞代码网(gaodaima.com)提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected],我们会在看到邮件的第一时间内为您处理,或直接联系QQ:872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:javascript – 点击checkbox触发form表单提交事件

喜欢 (0)
[搞代码]
分享 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址