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>
[解决办法]
这样就行了
<!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>