实现checkbox全选、反选、取消JavaScript小脚本异常


Posted in Javascript onApril 10, 2014

今天在实现checkbox全选,反选,取消JavaScript小脚本的时候,总是出现点击后页面瞬间刷新,选择的checkbox全部取消的问题,debug了半天,才发现原来是<button>标签中少写了一个type属性的原因,郁闷啊,希望自己以后少犯这种特别2的错误,特此记录。

<!-- 以下为错误写法 --> 
<button name="checkAll" value="全选" class="checkButton" onClick="checkAll(form_favor,status)">全选</button>

<!-- 正确写法 --> 
<button name="checkAll" type="button" value="全选" class="checkButton" onClick="checkAll(form_favor,status)">全选</button>

实现checkbox全选、反选、取消JavaScript小脚本异常 
看了w3c的描述,瞬间明白了,在没写type属性的情况下,当时浏览器默认将它当submit处理了,而我表单接受处理的脚本还是空着的,所以就产生了“刷新”的现象!
Javascript 相关文章推荐
使用jquery的ajax需要注意的地方dataType的设置
Aug 12 Javascript
jQuery中hasClass()方法用法实例
Jan 06 Javascript
JavaScript中setTimeout和setInterval函数的传参及调用
Mar 11 Javascript
全面解析Bootstrap中form、navbar的使用方法
May 30 Javascript
javascript正则表达式中分组详解
Jul 17 Javascript
webpack配置的最佳实践分享
Apr 21 Javascript
Angular.js项目中使用gulp实现自动化构建以及压缩打包详解
Jul 19 Javascript
微信小程序实现轮播图效果
Sep 07 Javascript
vue+axios新手实践实现登陆的示例代码
Jun 06 Javascript
浅析vue-router实现原理及两种模式
Feb 11 Javascript
JavaScript实现随机点名小程序
Oct 29 Javascript
VUE项目实现主题切换的多种方法
Nov 26 Vue.js
用js设置下拉框为只读的小技巧
Apr 10 #Javascript
js获取上传文件大小示例代码
Apr 10 #Javascript
JavaScript中双叹号(!!)作用示例介绍
Apr 10 #Javascript
js实现图片旋转的三种方法
Apr 10 #Javascript
javascript:void(0)的问题使用探讨
Apr 10 #Javascript
ajax请求乱码的解决方法(中文乱码)
Apr 10 #Javascript
php的文件上传入门教程(实例讲解)
Apr 10 #Javascript
You might like
PHP+Tidy-完美的XHTML纠错+过滤
2007/04/10 PHP
php下目前为目最全的CURL中文说明
2010/08/01 PHP
PHP中把对象转换为关联数组代码分享
2015/04/09 PHP
PHP如何通过传引用的思想实现无限分类(代码简单)
2015/10/13 PHP
php三种实现多线程类似的方法
2015/10/30 PHP
微信开发之php表单微信中自动提交两次问题解决办法
2017/01/08 PHP
PHP 结合 Boostrap 结合 js 实现学生列表删除编辑及搜索功能
2019/05/21 PHP
JS 实现Table相同行的单元格自动合并示例代码
2013/08/27 Javascript
详解JS 比较两个Json对象的值是否相等的实例
2013/11/20 Javascript
JS window对象的top、parent、opener含义介绍
2013/12/03 Javascript
jquery动态添加删除(tr/td)
2015/02/09 Javascript
json对象转为字符串,当做参数传递时加密解密的实现方法
2016/06/29 Javascript
jQuery实现的导航下拉菜单效果
2016/07/04 Javascript
javascript 数组的正态分布排序的问题
2016/07/31 Javascript
BootStrap Validator使用注意事项(必看篇)
2016/09/28 Javascript
js编写的treeview使用方法
2016/11/11 Javascript
angular实现form验证实例代码
2017/01/17 Javascript
JavaScript通过filereader接口读取文件
2017/05/10 Javascript
javaScript中封装的各种写法示例(推荐)
2017/07/03 Javascript
js实现移动端导航点击自动滑动效果
2017/07/18 Javascript
import与export在node.js中的使用详解
2017/09/28 Javascript
JS中原始值和引用值的储存方式示例详解
2018/03/23 Javascript
vue.js中npm安装教程图解
2018/04/10 Javascript
Vue脚手架的简单使用实例
2018/07/10 Javascript
javascript匿名函数中的'return function()'作用
2018/10/15 Javascript
js String.prototype.trim字符去前后空格的扩展
2020/08/23 Javascript
JavaScript设计模式之观察者模式与发布订阅模式详解
2020/05/07 Javascript
[52:03]Secret vs VG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Numpy中转置transpose、T和swapaxes的实例讲解
2018/04/17 Python
Python实现iOS自动化打包详解步骤
2018/10/03 Python
python3中确保枚举值代码分析
2020/12/02 Python
jupyter notebook远程访问不了的问题解决方法
2021/01/11 Python
时尚孕妇装:HATCH Collection
2019/09/24 全球购物
团日活动总结书
2014/05/08 职场文书
升学宴演讲稿
2014/09/01 职场文书
python基础之模块的导入
2021/10/24 Python