CODEWITHSUNDEEP
javascriptjquery
PixelPaul
PixelPaul

Reputation: 2767

Selecting all checkboxes in a table when a single checkbox is clicked

I have a table that populates a table row with data when a checkbox in the rows first column is clicked. That part is working correctly. There is a header column with a 'Select All' checkbox. When that checkbox is selected, all rows should be populated and corresponding checkbox selected. This is working correctly on IE, but on Chrome and Firefox the data is populating but the checkboxes are not being selected. Any ideas?

$('.selectAll input[type="checkbox"]').change(function () {

    var thistable = $(this).parents('table');
    if (this.checked) {

        populateOptions(thistable);
        thistable.find('.hiddenUntilOrder').addClass('showItems');
        thistable.find('tr').each(function () {
            $(this).find('.distribution').rules("add", { required: true, messages: { required: "" } });
        });
        thistable.find('.checkbox').prop("checked", true);

    } else {
        thistable.find('.hiddenUntilOrder').removeClass('showItems').rules("remove");
        thistable.find('tr').each(function () {
            $(this).find('.distribution').rules("remove");
        });
        thistable.find('.checkbox').prop("checked", false);
    }
});

Upvotes: 0

Views: 3991

Answers (2)

javacoder
javacoder

Reputation: 71

I have just coded in fiddle. Please look into it.

$(document).ready(function(){   
  $('#selectAll').click(function(){
        $('.selectRow').prop('checked', true);

      if(!$(this).prop("checked")) {
            $('.selectRow').prop('checked', false);
      }
  });

  $('.selectRow').change(function() {
        if(!$(this).prop("checked")) {
          $('#selectAll').prop('checked', false);
      } else {
         if ($('.selectRow:checked').length === $('.selectRow').length) {
             $('#selectAll').prop('checked', true);
         }
      }
  });
});

https://jsfiddle.net/sbwfcxnr/2/

Upvotes: 0

Erik Philips
Erik Philips

Reputation: 54618

Take a moment and read Decoupling Your HTML, CSS, and JavaScript - Philip Walton.

$('.js-selectall').on('change', function() {
  var isChecked = $(this).prop("checked");
  var selector = $(this).data('target');
  $(selector).prop("checked", isChecked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="checkbox" class="js-selectall" data-target=".js-selectall1" />

<table>
  <tr>
    <td><input type="checkbox" class="js-selectall1" /> </td>
    <td><input type="checkbox" class="js-selectall1" /> </td>
    <td><input type="checkbox" class="js-selectall1" /> </td>
    <td><input type="checkbox" class="js-selectall1" /> </td>
  </tr>
  <tr>
    <td><input type="checkbox" class="js-selectall1" /> </td>
    <td><input type="checkbox" class="js-selectall1" /> </td>
    <td><input type="checkbox" class="js-selectall1" /> </td>
  </tr>
</table>

Reusable and loosely coupled.

Upvotes: 3

Related Questions