实现checkbox全选、反选、取消JavaScript小脚本异常
更新时间：2014年04月10日 15:41:05 作者：
实现checkbox全选，反选，取消JavaScript小脚本的时出现点小异常，大家可以看看，以后就不要犯这个特别2的错误了
今天在实现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>
看了w3c的描述，瞬间明白了，在没写type属性的情况下，当时浏览器默认将它当submit处理了，而我表单接受处理的脚本还是空着的，所以就产生了“刷新”的现象！
复制代码 代码如下:
<!-- 以下为错误写法 -->
<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>
看了w3c的描述，瞬间明白了，在没写type属性的情况下，当时浏览器默认将它当submit处理了，而我表单接受处理的脚本还是空着的，所以就产生了“刷新”的现象！
相关文章
javascript实现划词标记+划词搜索功能...2007-03-03
经常会遇到这样一个情况：浏览器弹出对话框，提示脚本运行时间过长，询问“停止”还是“继续”。那究竟各个浏览器是如何判断在什么时候才弹出此对话框呢？2009-04-04
js 自制滚动条的小例子，需要的朋友可以参考一下2013-03-03
Bootstrap每天必学之基础排版，排版是学习的最基础环节，相当于地基，所以大家一定要认真对待，认真学习本文内容。2015-11-11
在使用原生框架开发小程序时遇到一个问题，在 app.wxss 中定义的全局样式在自定义组件中不生效，本文就详细的介绍一下，感兴趣的可以了解一下2021-08-08
本文通过实例给大家详解介绍了Bootstrap笔记之缩略图、警告框知识，非常不错，具有参考借鉴价值，需要的朋友可以参考下2017-03-03
这篇文章主要为大家详细介绍了如何基于JavaScript构建一个动态博客应用,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2024-02-02
这篇文章主要介绍了微信小程序实现的动态设置导航栏标题功能,结合实例形式分析了微信小程序使用wx.setNavigationBarTitle接口动态设置导航栏标题的相关操作技巧,需要的朋友可以参考下2019-01-01
相信大家应该都知道ts只允许数组中包括一种数据类型的值,下面这篇文章主要给大家介绍了关于typeScript中数组类型定义及应用的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-05-05
在网上看到很多人都写了“webpack最佳实践方案”，适合的才是“最佳”的，在这里总结一下自己在工作过程中总结出来的最佳实践，所以本文主要介绍了关于webpack配置的相关资料，需要的朋友们可以参考借鉴，下面来一起看看吧。2017-04-04
最新评论