我在label下面套了个checkbox,然后绑定事件,但是每次点文字那部分的时候,点击事件总会响应2次,阻止冒泡貌似也没有用,特此前来求教CSDN里面的各位大神~~在线等~
代码如下:<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gbk">
        <title>test page</title>
        <script type='text/javascript' src="js/jquery-1.9.1.min.js"></script>
    </head>
    <body>                
        <label class="testCbox"><input type="checkbox" value="">hello world</label>    
        <script type="text/javascript">              
            $(".testCbox").bind("click",function(e){
                console.log(this);
                console.log($(this).find('input').get(0).checked);
                // e.stopPropagation();   
            });         
        </script>          
    </body>
</html>CheckBoxHTMLJavaScriptlabel

解决方案 »

  1.   

    你有两个console.log自然要输出两次
      

  2.   

    不是这个意思的啦,是两次进入function(e)....也就是有4行console.log
      

  3.   

    放到外面去点文字checkbox就不会有反应了啊
      

  4.   


          <div id="test">   <input type="checkbox" value=""  /><label class="testCbox">hello world</label></div>
            <script type="text/javascript">
                $(".testCbox").bind("click", function (e) {
                    console.log(this);
                    console.log($("#test").find('input', [0]).attr("checked", "checked"));
                    // e.stopPropagation();   
                });         
            </script>        
      

  5.   

    这种我也想过,手动改checkbox。。但是按照样式还是要把checkbox放在label里面继续求大神~~
      

  6.   

    我觉得 这样就可以了 何必那么麻烦用JS     <input type="checkbox" value="" name="test" id="test" /> <label for="test" class="testCbox">hello world</label>   
      

  7.   


    谢谢大哥 这样是可以的~
    但现在的样式固死了就是label包着checkbox。。有没有办法呢。。
      

  8.   

    试试这样$(".testCbox").bind("click",function(e){
    if(e.target.tagName!="INPUT")
    return;
    console.log("click");  
    });  
      

  9.   


     <label ><input type="checkbox" value="" class="testCbox">hello world</label>    
            <script type="text/javascript">              s
                $(".testCbox").bind("click",function(e){
                    console.log(this);
                    console.log($(this).find('input').get(0).checked);
                    // e.stopPropagation();   
                });         
            </script>
    试试吧;
    把事件绑定到input 上
      

  10.   

    把input放到label外面去, 然后给label设置属性for="input的name(还是id,有点忘记,自己试试吧)"
    放到外面去点文字checkbox就不会有反应了啊