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上时的点击事件 则问题就变得不一样了。
  

解决方案 »

  1.   

    确实是有点麻烦。其实可以用隐藏checkbox ipnut用样式写个checkbox效果。。一个选中图片一个未选中的图片.改变两样式而已。我这就不贴代码了！
      

  2.   

    我修改下效果在这里http://jsfiddle.net/nibuduomaomao/hpYVg/
      

  3.   

    funnyone：你修改以后 点击checkbox没有反应了
      

  4.   


    不好意思看错啦 
    我解决啦这个问题
    http://jsfiddle.net/nibuduomaomao/hpYVg/
      

  5.   

    这个还真有点难度呢,如果点击span 那只执行span的点击事件,如果点击 checkbox 那先会产生checkbox 的选择事件,然后再执行span 的点击事件.
      

  6.   

    取消checkbox的冒泡事件。<span id="myspan" onclick="test()"><input type="checkbox" id="mychck" name="c1" value="A" checked="checked" onclick="event.stopPropagation()"/>A</span>
      

  7.   

    其实没必要怎么做吧。
    使用<label>标签环绕checkbox 就有这种效果
    <label><input type="checkbox" id="mychck" name="c1" value="A" />选项1</label>
      

  8.   

    用背景图片代替selectbox，通常需要将slectbox隐藏掉
      

  9.   

    使用LABEL标签 指定FOR属性为复选框的ID就可以了
    <input  type="checkbox" id="cbx1"/><label for="cbx1">点击选中/取消</label>
      

  10.   

    这样就行了<!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>