javascript问题两个标签onclick调用同一个函数，效果却不一样

<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN"><html><head><title>表单定位</tit... <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>表单定位</title>
<script type="text/javascript">
function selectAllHobby(){
var hobbies=document.forms['myfrm'].stuhobby;
var len = hobbies.length;
//alert(len);
for(var i=0; i<len; i++)
{
hobbies[i].checked = true;
}
}
</script>
</head>
<body>
<form name="myfrm" >
<div>
<span>学生爱好：</span>
<input type="checkbox" name="stuhobby" value="run"/>跑步
<input type="checkbox" name="stuhobby" value="sw"/>游泳
<input type="checkbox" name="stuhobby" value="read" checked/>阅读
<input type="checkbox" name="stuhobby" value="climb"/>爬山
<button onclick="selectAllHobby()">全选1</button>
<input type="button" onclick="selectAllHobby()" value="全选2"/>
</div>
</form>
</body>
</html>
你们自己试试全选1 和全选2 展开

 我来答

4个回答

#热议# 为什么有人显老，有人显年轻？

RobotNinja
2014-07-21 · TA获得超过251个赞

知道答主

回答量：32

采纳率：50%

帮助的人：28.9万

我也去答题访问个人页

关注

展开全部

<button onclick="selectAllHobby()">全选1</button>
<button>是html5的标签。
如果没有设置type属性的话，Internet Explorer 的默认类型是 "button"，而其他浏览器中的默认值是 "submit"。
如果你在IE浏览器里看，两个效果是一样的。
但是如果你在其他浏览器中，因为你没有设置type属性，默认为submit提交，所有<button>标签点击的时候会提交数据，你没有指定提交到哪里，所以会看到很快的全选后页面刷新了一下。
如果你在<button>标签里加上type="button"，两者效果也是一样。

已赞过 已踩过<

评论收起

唯听像默16
2014-07-21 · 超过29用户采纳过TA的回答

知道答主

回答量：64

采纳率：0%

帮助的人：23.4万

我也去答题访问个人页

关注

展开全部

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>表单定位</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
function selectAllHobby(){
var hobbies=document.forms['myfrm'].stuhobby;
var len = hobbies.length;
//alert(len);
for(var i=0; i<len; i++)
{
hobbies[i].checked = true;
}
}
</script>
</head>
<body>
<form name="myfrm" >
<div>
<span>学生爱好：</span>
<input type="checkbox" name="stuhobby" value="run"/>跑步
<input type="checkbox" name="stuhobby" value="sw"/>游泳
<input type="checkbox" name="stuhobby" value="read" checked/>阅读
<input type="checkbox" name="stuhobby" value="climb"/>爬山

<button onclick="selectAllHobby()" type="button">全选1</button>
<input type="button" onclick="selectAllHobby()" value="全选2"/>
</div>
</form>
</body>
</html>

button没有指定type为button

追问

非常感谢~

已赞过 已踩过<

评论收起

匿名用户
2014-07-21

展开全部

单击全选一：页面有刷新
单击全选二：页面无刷新
具体一点为什么：
w3school上对于<button> 标签的解释：Internet Explorer 的默认类型是 "button"，而其他浏览器中（包括 W3C 规范）的默认值是 "submit"。

追问

非常感谢~

已赞过 已踩过<

评论收起

1_1_8881_1_888
2014-07-21 · TA获得超过855个赞

知道小有建树答主

回答量：391

采纳率：50%

帮助的人：364万

我也去答题访问个人页

关注

展开全部

在selectAllHobby函数里面加一行代码event.preventDefault();

或者<button type="button" onclick="selectAllHobby()">全选1</button>

追问

很感谢你的回答

已赞过 已踩过<

评论收起

更多回答（2）

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

javascript问题 两个标签onclick调用同一个函数，效果却不一样

其他类似问题

为你推荐：

javascript问题两个标签onclick调用同一个函数，效果却不一样