Checkbox gets bugged MARK ALL -RETIRATE SELECTION -Special event;

Navigation
2

Hello everyone, my goal is to check and uncheck the checkboxes until then, all right look at the print:

I press to select all and the script selects ALL I click to unmark it uncheck ALL until everything is right.

The PROBLEM is that if I go with the mouse and click on a checkbox of those and remove the selection and then click on select all they are NOT SELECTED BY THE TOOL SELECT ALL THAT I CREATED. Do you understand?

Type like this:

1- I clicked select all, now everyone is selected as in the image.

2-I choose the first checkbox and uncheck it.

3-Now I'll click on select all.

4-The select all does not mark my 1 checkbox. Do you understand agr?

My script is this: 

//AQUI É PRA SELECIONAR TODOS OS CHECKBOX AMIGOS O BOTÃO AZUL LA ENCIMA SELECIONAR TODOS
$('.selecionadinho').bind('click',function() {

            $('.checkboxs').each( function() {

                $(this).attr('checked',true);

            }
            );  

    });


//AQUI ESSE CODIGO VAI RETIRAR TODOS OS CHECKBOX AZUL LA ENCIMA RETIRAR SELEÇÃO DE TODOS
        $('.retirar').bind('click',function() {

            $('.checkboxs').each( function() {

                $(this).attr('checked',false);

            }
            );  

    });
    
asked by anonymous 18.11.2017 / 21:31

1 answer

1

Two things to fix in your code:

1. Change .bind by .on , because .bind() is no longer used, has been deprecated in jQuery 3.0. 

$('.selecionadinho').on('click',function() {...
$('.retirar').on('click',function() {...

2. Do not use .attr to change boolean true and false values of input . Use .prop : 

$(this).prop('checked',false); ou $(this).prop('checked',true);

With these changes your code will work round.

TIP to improve the code:

Instead of using two functions for this, you can only use one:

Place the "SELECT ALL" and "REMOVE ALL SELECTION" links the same class="sel_tudo_nada" , and replace your two functions with just this one: 

$('.sel_tudo_nada').on('click',function(){
   var checar = $(this).index() == 0 ? true : false;
   $('.checkboxs').each( function() {
      $(this).prop('checked',checar);
   });
});

UPDATE

The code: 

var checar = $(this).index() == 0 ? true : false;

is an abbreviated form of: 

// $(this).index() é o índice do link clicado,
// onde 0 é o primeiro e 1 seria o segundo
if( $(this).index() == 0 ){
   checar = true;
}else{
   checar = false;
}
    
18.11.2017 / 22:15
Error in sorting numbers added text with append does not respect div