复选框选择全部不起作用

时间:2013-03-18 11:39:10

标签: jquery checkbox

我的脚本工作非常好,直到我添加(#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>

4 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分: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();
  });
});

答案 2 :(得分: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; 
}); 
});

答案 3 :(得分: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);
    });
});