span的onclick事件改变内部的checkbox状态解决办法
日期：2014-05-16 浏览次数：20342 次
span的onclick事件改变内部的checkbox状态
html如下：
<span id="myspan" onclick="test()"><input type="checkbox" id="mychck" name="c1" value="A" />A </span>
预想结果 :我在 span上添加了oncick事件（span的宽度很大，方便用户点击），希望点击span的时候同时改变checkbox的选择状态。
function test(){
if($("#mychck").attr("checked") == false){
$("#mychck").attr("checked","chheck");
}
else{
$("#mychck").attr("checked","");
}
}
让我比较郁闷的是我点击span时，点击的时候如果鼠标不在checkbox上时上面的代码可以实现点击checkbox一样的改变状态的效果，但是当鼠标在checkbox上时的点击事件 则问题就变得不一样了。
------解决方案--------------------
取消checkbox的冒泡事件。
<span id="myspan" onclick="test()"><input type="checkbox" id="mychck" name="c1" value="A" checked="checked" onclick="event.stopPropagation()"/>A</span>
------解决方案--------------------
其实没必要怎么做吧。
使用<label>标签环绕checkbox 就有这种效果
<label><input type="checkbox" id="mychck" name="c1" value="A" />选项1</label>
------解决方案--------------------
这样就行了
html如下：
<span id="myspan" onclick="test()"><input type="checkbox" id="mychck" name="c1" value="A" />A </span>
预想结果 :我在 span上添加了oncick事件（span的宽度很大，方便用户点击），希望点击span的时候同时改变checkbox的选择状态。
function test(){
if($("#mychck").attr("checked") == false){
$("#mychck").attr("checked","chheck");
}
else{
$("#mychck").attr("checked","");
}
}
让我比较郁闷的是我点击span时，点击的时候如果鼠标不在checkbox上时上面的代码可以实现点击checkbox一样的改变状态的效果，但是当鼠标在checkbox上时的点击事件 则问题就变得不一样了。
------解决方案--------------------
取消checkbox的冒泡事件。
<span id="myspan" onclick="test()"><input type="checkbox" id="mychck" name="c1" value="A" checked="checked" onclick="event.stopPropagation()"/>A</span>
------解决方案--------------------
其实没必要怎么做吧。
使用<label>标签环绕checkbox 就有这种效果
<label><input type="checkbox" id="mychck" name="c1" value="A" />选项1</label>
------解决方案--------------------
这样就行了
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
</style>
<script>
window.onload = function(){
var _div = document.getElementsByTagName('div')[0],
_c = document.getElementById('cl'),
stopBubble = function(e){
if(e){
e.stopPropagation();
}else{
window.event.cancelBubble = true;
}
};
_div.onclick = function(){
_c.checked = (_c.checked) ? false : true;
};
_c.onclick = function(e){
stopBubble(e);
};
};
</script>
</head>
<body>
<div
</div>
<div style="width:500px; height:200px; padding:20px; color:white; background-color:black; ">><input type="checkbox" id="cl" value="a" />ffff</div>
</body>
</html>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
