实现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 相关文章推荐
Code:loadScript( )加载js的功能函数
Feb 02 Javascript
Extjs中ComboBox加载并赋初值的实现方法
Mar 22 Javascript
jQuery获取及设置表单input各种类型值的方法小结
May 24 Javascript
Ionic实现页面下拉刷新(ion-refresher)功能代码
Jun 03 Javascript
JavaScript模板引擎Template.js使用详解
Dec 15 Javascript
Vue-Router2.X多种路由实现方式总结
Feb 09 Javascript
详解如何配置vue-cli3.0的vue.config.js
Aug 23 Javascript
原生JS实现前端本地文件上传
Sep 08 Javascript
Vue2.0实现组件之间数据交互和通信操作示例
May 16 Javascript
JavaScript使用面向对象实现的拖拽功能详解
Jun 12 Javascript
element表格翻页第2页从1开始编号(后端从0开始分页)
Dec 10 Javascript
javascript实现拖拽碰撞检测
Mar 12 Javascript
用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中PDO基础教程 入门级
2011/09/04 PHP
php字符比较函数similar_text、strnatcmp与strcasecmp用法分析
2014/11/18 PHP
微信公众号支付之坑:调用支付jsapi缺少参数 timeStamp等错误解决方法
2016/01/12 PHP
Zend Framework实现具有基本功能的留言本(附demo源码下载)
2016/03/22 PHP
php变量与数组相互转换的方法(extract与compact)
2016/12/02 PHP
PHP 7.1新特性的汇总介绍
2016/12/16 PHP
php利用imagemagick实现复古老照片效果实例
2017/02/16 PHP
php中的buffer缓冲区用法分析
2019/05/31 PHP
php高性能日志系统 seaslog 的安装与使用方法分析
2020/02/29 PHP
关于js datetime的那点事
2011/11/15 Javascript
js屏蔽鼠标键盘(右键/Ctrl+N/Shift+F10/F11/F5刷新/退格键)
2013/01/24 Javascript
5分钟理解JavaScript中this用法分享
2013/11/09 Javascript
纯JavaScript实现的兼容各浏览器的添加和移除事件封装
2015/03/28 Javascript
微信小程序 在Chrome浏览器上运行以及WebStorm的使用
2016/09/27 Javascript
微信小程序实现swiper切换卡内嵌滚动条不显示的方法示例
2018/12/20 Javascript
vue npm install 安装某个指定的版本操作
2020/08/11 Javascript
浅谈vue中resetFields()使用注意事项
2020/08/12 Javascript
Vue 3自定义指令开发的相关总结
2021/01/29 Vue.js
[01:10]DOTA2次级职业联赛 - U5战队宣传片
2014/12/01 DOTA
python实现基于信息增益的决策树归纳
2018/12/18 Python
python递归法实现简易连连看小游戏
2020/03/25 Python
django 微信网页授权认证api的步骤详解
2019/07/30 Python
wxPython实现文本框基础组件
2019/11/18 Python
OpenCV中VideoCapture类的使用详解
2020/02/14 Python
详解python的super()的作用和原理
2020/10/29 Python
简单总结CSS3中视窗单位Viewport的常见用法
2016/02/04 HTML / CSS
Diptyque英国官方网站:源自法国的知名香氛品牌
2019/08/28 全球购物
莫斯科购买书籍网站:Book24
2020/01/12 全球购物
毕业生优秀推荐信
2013/11/26 职场文书
聘任书的写作格式及范文
2014/03/29 职场文书
小班下学期评语
2014/05/04 职场文书
升学宴演讲稿
2014/09/01 职场文书
2014年调度员工作总结
2014/11/19 职场文书
实习科室评语
2015/01/04 职场文书
幼儿园毕业典礼家长致辞
2015/07/29 职场文书
话题作文之成长
2019/12/09 职场文书