HTML/Javascript: 点击按钮页面刷新问题

来源：互联网发布：雅各布矩阵和海森矩阵编辑：程序博客网时间：2024/05/29 13:58

注：我只是为了说明点击按钮页面刷新的问题，并不是指这一功能有缺陷。下面我会举出我遇到的例子。

上图是我制作的一个很简易的HTML表单。当我按下全选按钮时，发现有一瞬间全部项目打上勾，但是立马所有勾就消失了。当时感觉很奇怪，在怀疑是不是js的代码出现错误了，可是经过自己核对没有发现什么错误。

于是我就打开了Chrome的调试器，输入以下内容：

运行后第一个选项能正常被打勾。然后我点击了全选按钮，调试器里的内容瞬间变空：

这说明了什么？说明了当我点击全选按钮时，页面被刷新了，自然所有打勾的都被清空了。

那为什么会出现这种情况？我们来看一下HTML代码：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <script type="text/javascript" src="index.js"></script></head><body>    <form>        <input type="checkbox" name="hobby" value="跑步" id="hobby1"> 跑步        <input type="checkbox" name="hobby" value="跳舞" id="hobby2"> 跳舞        <input type="checkbox" name="hobby" value="唱歌" id="hobby3"> 唱歌        <br>        <button id="selectall">全选</button>        <button id="cancelall">全不选</button>        <br>        <input type="text" name="choice" id="choice">        <button type="submit" id="submit">提交</button>    </form></body></html>

问题就出在form标签上。因为数据用form提交一定会刷新页面，于是我们只要把form标签删去，就能得到我们想要的效果了(也就是点击按钮不会刷新)。

但是在实际中，form标签是必不可少的，为了解决问题，可以用ajax实现。

在这里要重新说明一下：点击按钮出现刷新，这是正常现象，因为有form元素；但是我并不想将数据传到服务器，只是想实现这种效果才将form标签删去。总而言之，现实中肯定不能使用我这种简单粗暴的做法，应用其他方法解决，我只是从这次经历中了解到：form标签提交数据时会刷新页面。

以上内容皆为本人观点，欢迎大家提出批评和指导，我们一起探讨！

1 0