Question

I having trouble with the following two jquery scripts

$(document).ready(function() {
    var $checkboxes = $("#table_pdf_view input[type=checkbox]");
    $checkboxes.on('change', function() {
        var ids = $checkboxes.filter(':checked').map(function() {
            return this.id;
        }).get().join(',');
        $('#multi_client_id').val(ids);
    });
});
//-->
<!--
$(document).ready(function(){ // 1
    // 2
    $(':checkbox.selectall').on('click', function(){
        // 3
        $(':checkbox[name=' + $(this).data('checkbox-name') + ']').prop("checked", $(this).prop("checked"));

    });

});

Both work perfectly by themselves. The first goes through #table_pdf_view and if the checkbox is checked returns its id to a hidden input #multi_client_id

The second is a select all checkbox. Which when checked selects all the checkboxes in with the same name. The select all checkbox is outside the #table_pdf_view.

The problem is when I use the select all checkbox the value returned to the hidden input is not correct. It returns the id of the select all check box only and not the ids of the other checkboxes and I do not know why.

Answer 1

The reason thats happening is because the Select All checkbox is also a checkbox within the div that you are using this selector on:

  var $checkboxes = $("#table_pdf_view input[type=checkbox]");

You need to move it out of that div, or change the way you are getting all of the checkboxes.

For example if you look at the following page, it tells you how to ignore a certain checkbox:

jQuery – How to select all checkboxes EXCEPT a specific one?

Hope this helps.

UPDATE

Here is the working version:

  //Handle Multi Download
  $(document).ready(function() {
  var $checkboxes = $('#table_pdf_view input:checkbox:not("#sa_download")');
  $checkboxes.on('change', function() {
        var ids = $checkboxes.filter(':checked').map(function() {
        return this.id;
    }).get().join(',');
    $('#multi_client_id').val(ids);
  });
  });


  $(document).ready(function(){ // 1
   // 2
       $(':checkbox.selectall').on('click', function(){
       // 3
           $(':checkbox[name=' + $(this).data('checkbox-name') + ']').prop("checked", $(this).prop("checked"));
           $(':checkbox[name=' + $(this).data('checkbox-name') + ']').trigger("change");
       });

   });