jQuery复选框:选择除一个以外的所有/无

时间:2012-01-03 00:53:19

标签: javascript jquery checkbox selection

我有一个复选框选择所有问题。我有多个复选框,可以由主控制器触发。

如果主人检查,那么你可以选择任何复选框(这是有效的)。现在我的问题是,当我检查“无”时,所有这些都已经消失了,即使是主人

我需要的是不要取消选中主人。我可以拥有尽可能多的复选框。

是否有解决方案可以在不给每个ID添加ID或自动取消选中所有复选框而不是主复选框的情况下执行此操作?

这是我的代码:

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">

  $(document).ready(function() {
  $('#checkAll').click(function() {
    if(!$('#master').is(':checked')) {  return;
    } $('input[type="checkbox"]').attr('checked', true);
  });

  $('#checkNone').click(function() {
    $('input[type="checkbox"]').attr('checked', false); });

  $('#master').click(function() { if($('#master').is(':checked')) {
        return; } $('input[type="checkbox"]').attr('checked', false);
  });
  $('input[type="checkbox"]').click(function() {
    if(!$('#master').is(':checked')) { $(this).attr('checked', false);
    }
  });
  });

  </script>
  </head>

  <input type="checkbox" value="master" id="master">master
  <span id="checkAll">All</span>
  <span id="checkNone">None</span>

  <input type="checkbox" value="1" id="c1">1
  <input type="checkbox" value="2" id="c2">2
  <input type="checkbox" value="3" id="c3">3
  <input type="checkbox" value="4" id="c4">4
  <input type="checkbox" value="5" id="c5">5

2 个答案:

答案 0 :(得分:12)

根据你的代码,我会在你想要选择all / none的复选框周围添加一个包装器,然后给包装器id和输入选择all或none。

$('#list input[type="checkbox"]').attr('checked', false);

或jQuery 1.6 +

$('#list input[type="checkbox"]').prop('checked', false);

这样,您可以控制所有复选框,而不会影响“主”复选框。

以下是代码:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {
$('#checkAll').click(function() {
  if(!$('#master').is(':checked')) {
      return;
  }
  $('#list input[type="checkbox"]').attr('checked', true);
});

$('#checkNone').click(function() {
  $('#list input[type="checkbox"]').attr('checked', false);
});

$('#master').click(function() {
  if($('#master').is(':checked')) {
      return;
  }
  $('#list input[type="checkbox"]').attr('checked', false);
});
$('#list input[type="checkbox"]').click(function() {
  if(!$('#master').is(':checked')) {
      $(this).attr('checked', false);
  }
});
});

</script>
</head>

<input type="checkbox" value="master" id="master">master
<span id="checkAll">All</span>
<span id="checkNone">None</span>

<div id="list">
 <input type="checkbox" value="1">1
 <input type="checkbox" value="2">2
 <input type="checkbox" value="3">3
 <input type="checkbox" value="4">4
 <input type="checkbox" value="5">5
</div>

答案 1 :(得分:6)

您只需要进行非常小的修改就可以排除主人。

您可以使用.not(“#master”)这样做:

  $('#checkNone').click(function() {
    $('input[type="checkbox"]').not("#master").attr('checked', false); });