jQuery checkbox: select all/none except one

Question

I have a checkbox select all issue. I have multiple checkbox that can be triggered by a master one.

If the master one is check then you can select any checkbox (which this works). Now my problem is when i check "none" all of them are gone even the master

What I need is not to unchecked the master. I can have as many as checkbox as I want.

Is there a solution to do this without putting an ID on each or automatically uncheck all checkbox and not the master one?

here is my code:

 <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

uncheck all then recheck the master – Andrew Samuelsen Jan 03 '12 at 00:54 — Andrew Samuelsen, Jan 03 '12 at 00:54

Book Of Zeus · Accepted Answer · 2015-05-09T21:49:24.220

Based on your code, I would add a wrapper around the check-box you want to select all/none and then give the wrapper id and inputs to select all or none.

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

or for jQuery 1.6+

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

This way, you can control all your checkboxes without affecting the "master" one.

Here's the code:

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

so if I have multiple list and buttons, i can create as many list and buttons i can create each list individually? — Kevin Kelly, Jan 03 '12 at 01:03
yes and you can call dynamically based on which one you checked (master) if you need — Book Of Zeus, Jan 03 '12 at 01:04
thank you for your code, it works the way i needed it and i can easily update it to match my needs — Kevin Kelly, Jan 03 '12 at 03:06
As of jQuery 1.6, you will need to use `.prop` instead of `.attr` here. [See the jQuery docs for prop](https://api.jquery.com/prop/#prop1). Additionally, see [this related answer](http://stackoverflow.com/a/17902476/1377039) — ctrlaltdel, Mar 25 '15 at 21:01

score 6 · Answer 2 · answered Jan 03 '12 at 00:57

6

You only need a very small modification to exclude your master.

You can do that with a .not("#master") like this:

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

answered Jan 03 '12 at 00:57

Tys

3,592
9
49
71

1

so if i have multiple list and multiple master i have to put like: not('id1').not('id2').not('id3').not('id4')?? – Kevin Kelly Jan 03 '12 at 01:02
1

Nope. If all those masters have an id that ends with 'master', you can just exclude them all at once, like this: not("input[id$='master']") – Tys Jan 03 '12 at 01:04
Or .not("input[id*='master']") in case those id's start with 'master..'. See jQuery wildcard selection for more details on this stuff. – Tys Jan 03 '12 at 01:07
what is the jquery wildcard ? – Kevin Kelly Jan 03 '12 at 01:09
You use wildcards to select elements by matching part(s) of their properties/values, so that you don't have to explicitly add all elements by their full id like you suggested. See this like for more info: http://api.jquery.com/category/selectors/ – Tys Jan 03 '12 at 01:12

jQuery checkbox: select all/none except one

2 Answers2