2013-03-18 326 views
0

我的脚本工作非常好,直到我添加(#check_all),我的复选框不起作用,但分开他们工作正常。我找不到问题,请帮忙。复选框选择所有不工作

我的脚本

<script type="text/javascript"> 
$(document).ready(function(){ 

$(".bt").click(function(){ 
    $(".select_box").hide('fast'); 
    if ($(this).next('.select_box').is(':visible')){ 
     $(this).next(".select_box").hide('fast'); 
    } 
    else{ 
     $(this).next(".select_box").fadeIn('fast'); 
    } 
}); 
$(document).click(function() { 
    $(".select_box").hide(); 
}); 
$(".bt,.select_box").click(function(e) { 
    e.stopPropagation(); 
    return false;        
}); 

$('#check_all').click(function(){ 
    $(this).parents('div:eq(0)').find(':checkbox').attr('checked', this.checked); 
}); 
}); 

</script> 

的Html

<a class="bt" href="#">[X]</a> 
<div class="select_box" style="display:none;border:1px solid;"> 
    <input id="check_entite" type="checkbox" />(Select All)<br /> 
    <input type="checkbox" />1<br /> 
    <input type="checkbox" />2<br /> 
</div> 
<br><br> 
<a class="bt" href="#">[X]</a> 
<div class="select_box" style="display:none;border:1px solid;"> 
    <input id="check_all" type="checkbox" />(Select All)<br /> 
    <input type="checkbox" />1<br /> 
    <input type="checkbox" />2<br /> 
</div> 
+0

尝试用'prop'更换'attr'。 – pktangyue 2013-03-18 11:42:01

+0

你的问题是什么? – 2013-03-18 11:44:50

回答

0

看到这个:Sample

$(document).ready(function() { 

    $(".bt").click(function (e) { 
     $(".select_box").hide('fast'); 
     if ($(this).next('.select_box').is(':visible')) { 
      $(this).next(".select_box").hide('fast'); 
     } else { 
      $(this).next(".select_box").fadeIn('fast'); 
     } 
     e.stopPropagation(); 
    }); 
    $(document).click(function (e) { 
     $(".select_box").hide(); 
    }); 
    $('.select_box').click(function (e) { 
     e.stopPropagation(); 
    }); 
    $('#check_all,#check_entite').click(function (e) { 
     $(this).siblings(':checkbox').prop('checked', this.checked); 
     e.stopPropagation(); 
    }); 
}); 
+0

这非常好! – novoa 2013-03-18 13:12:16

+0

谢谢大家的提示和帮助! – novoa 2013-03-18 13:12:41

+0

欢迎..!很高兴能够得到帮助.. :) – Anujith 2013-03-18 13:16:50

0
$(this).closest('div').find(':checkbox').attr('checked', this.checked); 
0

我想原因是不是JS,其实这是你的逻辑太复杂,你应该重新组织它。试试这个或检查结果here

<script type="text/javascript"> 
$(document).ready(function(){ 

$(".bt").click(function(){ 
    $(".select_box").hide('fast'); 
    if ($(this).next('.select_box').is(':visible')){ 
     $(this).next(".select_box").hide('fast'); 
    } 
    else{ 
     $(this).next(".select_box").fadeIn('fast'); 
    } 
}); 
$(document).click(function() { 
    $(".select_box").hide(); 
}); 
$(".bt,.select_box").click(function(e) { 
    e.stopPropagation(); 
    return false;        
}); 

$('#check_all').click(function(){ 
    $(this).parents('div:eq(0)').find(':checkbox').attr('checked', this.checked); 
     e.stopPropagation(); 
    return false; 
}); 
}); 

0

什么是你想与完成:

$(".bt,.select_box").click(function(e) { 
    e.stopPropagation(); 
    return false;        
}); 

这是一个工作版本:JSFiddle

$(document).ready(function() { 

    $(".bt").click(function (e) { 
     $(".select_box").hide('fast'); 
     if ($(this).next('.select_box').is(':visible')) { 
      $(this).next(".select_box").hide('fast'); 
     } else { 
      $(this).next(".select_box").fadeIn('fast'); 
     } 
     return false; 
    }); 
    $(document).click(function() { 
     $(".select_box").hide(); 
    }); 

    $('.check_all').click(function() { 
     var checked = ($(this).prop('checked')); 
     $(this).parent('div').find(':checkbox').prop('checked', checked); 
    }); 
});