首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

怎么阻止checkbox点击事件响应两次

2013-07-09 
如何阻止checkbox点击事件响应两次?我在label下面套了个checkbox,然后绑定事件,但是每次点文字那部分的时

如何阻止checkbox点击事件响应两次?
我在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>
CheckBox HTML JavaScript label
[解决办法]
你有两个console.log自然要输出两次。。。
[解决办法]
把input放到label外面去
[解决办法]

      <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>        


[解决办法]
我觉得 这样就可以了 何必那么麻烦用JS   

  <input type="checkbox" value="" name="test" id="test" /> <label for="test" class="testCbox">hello world</label>   

[解决办法]
试试这样

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

热点排行