Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery checkbox: select all/none except one

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
like image 801
Kevin Kelly Avatar asked Jan 03 '12 00:01

Kevin Kelly


People also ask

How do I check uncheck all checkboxes with a button using jQuery?

Abstract: To Select or Deselect Checkboxes using jQuery, all you need to do is use the prop() method along with the change event to achieve the requirement in a couple of lines of code. Gmail has a nice option where you can select and deselect multiple checkboxes (Emails) using the 'Select All' checkbox.

How do I uncheck a specific checkbox in jQuery?

By using jQuery function prop() you can dynamically add this attribute or if present we can change its value i.e. checked=true to make the checkbox checked and checked=false to mark the checkbox unchecked.

How do you check all checkbox is checked or not in jQuery?

To check whether a Checkbox has been checked, in jQuery, you can simply select the element, get its underlying object, instead of the jQuery object ( [0] ) and use the built-in checked property: let isChecked = $('#takenBefore')[0]. checked console. log(isChecked);

How do you uncheck a selected checkbox when one checkbox is unchecked?

Select change event This one is only for changing the checkbox state based on option selection. Check total options and total selected options if it is equal then set Select All checkbox checked otherwise unchecked it.


1 Answers

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>
like image 105
Book Of Zeus Avatar answered Oct 15 '22 08:10

Book Of Zeus