JavaScript-js触发checkbox的click事件的问题

JavaScript-js触发checkbox的click事件的问题

灵芸 发布于 2017-05-08 字数 423 浏览 1091 回复 3

我先说下大概情况,我有一组checkbox,每个元素都占用一个span标签。
需求:用户点中span标签即可实现选中此checkbox。
问题来了,我在span标签上加了一个click事件,来触发选中,没问题,但是,再点checkbox的按钮时,全部无效。就仔细测试,checkbox的自带选中与我写的click事件同时触发,就是说,点一次checkbox,checkbox框被选中了,然后click事件触发,判断到是选中状态,so,checked=false。所以页面上看不出效果,求方法搞定它。

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

虐人心 2017-05-27 2 楼

我看了一下你的需求,感觉没有必要用JavaScript来实现,HTML标签的<label>就可以满足要求,
<input type="checkbox" name="hobby" id="test">
<label for="test">爱好</label>

如上,你只要点“爱好”,就可以选中这个checkbox标签。

如果你一定要JavaScript实现,原因是因为JavaScript的事件冒泡,相当于点了两次,一次是span的onclick事件,另一次是checkbox本身的选择事件,所以就造成了点了跟没点一样,所以就需要阻止事件冒泡。

//在onclick后调用该函数

<script language="javascript">
//阻止事件冒泡函数
function stopBubble(e)
{

if (e && e.stopPropagation)
e.stopPropagation() //非IE
else
window.event.cancelBubble=true; //IE

}
</script>

瑾兮 2017-05-23 1 楼

我解决了,我在checkbox上也加个事件。
var ev = window.event || arguments.callee.caller.arguments[0];
//注:火狐和IE获取event的方法不一样,研究了一会,这样可以了。
ev.cancelBubble = true;
取消span上的事件。