JQuery флажок: выбрать все / нет, кроме одного - PullRequest
Новая
       14

JQuery флажок: выбрать все / нет, кроме одного

15 голосов
/ 03 января 2012

У меня есть флажок выбрать все проблемы. У меня есть многократный флажок, который может быть вызван главным.

Если основным является флажок, то вы можете выбрать любой флажок (который работает). Теперь моя проблема, когда я проверяю "нет", все они ушли, даже мастер

Что мне нужно, так это не снимать флажок с мастера. Я могу установить столько флажков, сколько захочу.

Есть ли решение сделать это без установки идентификатора для каждого или автоматически снять все флажки, а не главный?

вот мой код: 

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

12 голосов
/ 03 января 2012

Исходя из вашего кода, я бы добавил обертку вокруг флажка, который вы хотите выбрать все / ничего, а затем дал бы идентификатор обертки и входные данные, чтобы выбрать все или ничего.

$('#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>
6 голосов
/ 03 января 2012

Вам нужна только очень маленькая модификация, чтобы исключить вашего хозяина.

Вы можете сделать это с .not ("# master") следующим образом: 

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