Select all checkboxes in Column and deselect them when checking another column

Question

I've been having trouble to make this work. I have 2 columns with checkboxes and 1 checkbox in each column that selects all others.

Example

The problem is that when I select the other column the child checkboxes keep selected

Example 2

I am using the next jquery function to make it work but it is only working partially

Script to select all checkboxes:

$("th input[type='checkbox']").on("change", function () {
    debugger;
    var cb = $(this),          //checkbox that was changed
        th = cb.parent(),      //get parent th
        col = th.index() + 1;  //get column index. note nth-child starts at 1, not zero
    $("tbody td:nth-child(" + col + ") input").prop("checked", this.checked);  //select the inputs and [un]check it
});

script to only select checkboxes in desired column:

 $('table').attr('id', 'test');

    $('input[type="checkbox"]').on('change', function () {
        var checado = $(this).prop('checked');

        $(this).closest('tr').find('input[type="checkbox"]').each(function () {
            $(this).prop('checked', false);
        });
        $(this).prop("checked", checado);
    });

Html:


    
        
                
                        Folio
                                        
                
                        Banco Destino
                                        
                
                        Tipo de documento
                                        
                
                        Estado
                                        
                
                        Conforme
                                           
                
                        No conforme
                                           
                
                        Comentarios
                                        
                
                        lolol
                                        
        
    
    
                
                        2017100000793
                        058 - Banregio
                        Copia certificada
                        ENTREGADO
                        
                        
                        
                          
                
                
                        2017100000790
                        058 - Banregio
                        Imagen
                        ATENDIDO

Thanks for the help

Zakaria Acharki · Accepted Answer

You could uncheck all the checkboxes first (except the current clicked) then check the desired ones :

//Uncheck all the checkboxes except the current clicked
$("table input:checkbox").not(this).prop("checked", false);

Hope this helps.

$("th input[type='checkbox']").on("change", function() {
  debugger;

  //Uncheck all the checkboxes except the current clicked
  $("table input:checkbox").not(this).prop("checked", false);

  var cb = $(this), //checkbox that was changed
    th = cb.parent(), //get parent th
    col = th.index() + 1; //get column index. note nth-child starts at 1, not zero

  $("tbody td:nth-child(" + col + ") input").prop("checked", this.checked); //select the inputs and [un]check it
});




  
    
      
        Folio
      
      
        Banco Destino
      
      
        Tipo de documento
      
      
        Estado
      
      
        Conforme   
         
      
        No conforme   
         
      
        Comentarios
      
      
        lolol
      
    
  
  
    
      2017100000793
      058 - Banregio
      Copia certificada
      ENTREGADO
      
      
      
       
    
    
      2017100000790
      058 - Banregio
      Imagen
      ATENDIDO

Select all checkboxes in Column and deselect them when checking another column

Answers (1)

Related Questions