Check and uncheck CheckBox items

Question

Check and uncheck CheckBox items

Navigation

#1 by (4 votes)
#2 by (1 votes)

1

I have the following form:

<div class="dia" id="dia" data-id="1"><input id="1" name="diasemana[]" type="checkbox" class="dias_semana" value="1"><label for="1"> Segunda</label></div>
<div class="dia" id="dia" data-id="2"><input id="2" name="diasemana[]" type="checkbox" class="dias_semana" value="2"><label for="2"> Terça</label></div>
<div class="dia" id="dia" data-id="3"><input id="3" name="diasemana[]" type="checkbox" class="dias_semana" value="3"><label for="3"> Quarta</label></div>
<div class="dia" id="dia" data-id="4"><input id="4" name="diasemana[]" type="checkbox" class="dias_semana" value="4"><label for="4"> Quinta</label></div>
<div class="dia" id="dia" data-id="5"><input id="5" name="diasemana[]" type="checkbox" class="dias_semana" value="5"><label for="5"> Sexta</label></div>
<div class="dia" id="dia" data-id="6"><input id="6" name="diasemana[]" type="checkbox" class="dias_semana" value="6"><label for="6"> Sábado</label></div>
<div class="dia" id="dia" data-id="0"><input id="0" name="diasemana[]" type="checkbox" class="dias_semana" value="0"><label for="0"> Domingo</label></div>

With the following jQuery

$(".dia").click(function(){
    var id = $(this).data('id');
    $(this).addClass("selecionado");                    
});

Class:

.selecionado {
    background-color: red;
}

When I click it it adds the class, to select the div, but when I clicked to disable the checkbox, it does not return to the previous color. How to do?

jquery

asked by anonymous 15.10.2017 / 21:47

2 answers

4

Looking at the ids specification in W3C you see that ids do not only has to be unique, as it must contain at least one letter.

You are breaking these two rules. Your divs have repeated ids:

<div id="dia" ...>...</div>
<div id="dia" ...>...

Just as the input ids have no letters and only numbers:

<input id="1" ...>
<input id="2" ...>

Correcting these two things already works:

$(".dia").click(function() {
  var id = $(this).data('id');
  $(".dia[data-id="+id +"]").addClass("selecionado");
});

.selecionado {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="dia" data-id="1"><input id="d1" name="diasemana[]" type="checkbox" class="dias_semana" value="1"><label for="1"> Segunda</label></div>
<div class="dia" data-id="2"><input id="d2" name="diasemana[]" type="checkbox" class="dias_semana" value="2"><label for="2"> Terça</label></div>
<div class="dia" data-id="3"><input id="d3" name="diasemana[]" type="checkbox" class="dias_semana" value="3"><label for="3"> Quarta</label></div>
<div class="dia" data-id="4"><input id="d4" name="diasemana[]" type="checkbox" class="dias_semana" value="4"><label for="4"> Quinta</label></div>
<div class="dia" data-id="5"><input id="d5" name="diasemana[]" type="checkbox" class="dias_semana" value="5"><label for="5"> Sexta</label></div>
<div class="dia" data-id="6"><input id="d6" name="diasemana[]" type="checkbox" class="dias_semana" value="6"><label for="6"> Sábado</label></div>
<div class="dia" data-id="0"><input id="d0" name="diasemana[]" type="checkbox" class="dias_semana" value="0"><label for="0"> Domingo</label></div>

But if you want to check and uncheck, then the method you need is not the addClass but the toggleClass :

$(".dia").click(function() {
  var id = $(this).data('id');
  $(".dia[data-id="+id +"]").toggleClass("selecionado");
});

.selecionado {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="dia" data-id="1"><input id="d1" name="diasemana[]" type="checkbox" class="dias_semana" value="1"><label for="1"> Segunda</label></div>
<div class="dia" data-id="2"><input id="d2" name="diasemana[]" type="checkbox" class="dias_semana" value="2"><label for="2"> Terça</label></div>
<div class="dia" data-id="3"><input id="d3" name="diasemana[]" type="checkbox" class="dias_semana" value="3"><label for="3"> Quarta</label></div>
<div class="dia" data-id="4"><input id="d4" name="diasemana[]" type="checkbox" class="dias_semana" value="4"><label for="4"> Quinta</label></div>
<div class="dia" data-id="5"><input id="d5" name="diasemana[]" type="checkbox" class="dias_semana" value="5"><label for="5"> Sexta</label></div>
<div class="dia" data-id="6"><input id="d6" name="diasemana[]" type="checkbox" class="dias_semana" value="6"><label for="6"> Sábado</label></div>
<div class="dia" data-id="0"><input id="d0" name="diasemana[]" type="checkbox" class="dias_semana" value="0"><label for="0"> Domingo</label></div>

15.10.2017 / 22:02

POST API Rest JSON How to get value from a json?

score 1 · Accepted Answer

$(document).ready(function() {
 $('div input[type=checkbox]').click(function() {
     if(!$(this).closest('div').hasClass('selecionado')){
         $(this).closest('div').addClass('selecionado');
     }else
         $(this).prop('checked', false).closest('div').removeClass('selecionado');
});

});

.selecionado {
    background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="dia" id="dia" data-id="1"><input id="1" name="diasemana[]" type="checkbox" class="dias_semana" value="1"><label for="1"> Segunda</label></div>
<div class="dia" id="dia" data-id="2"><input id="2" name="diasemana[]" type="checkbox" class="dias_semana" value="2"><label for="2"> Terça</label></div>
<div class="dia" id="dia" data-id="3"><input id="3" name="diasemana[]" type="checkbox" class="dias_semana" value="3"><label for="3"> Quarta</label></div>
<div class="dia" id="dia" data-id="4"><input id="4" name="diasemana[]" type="checkbox" class="dias_semana" value="4"><label for="4"> Quinta</label></div>
<div class="dia" id="dia" data-id="5"><input id="5" name="diasemana[]" type="checkbox" class="dias_semana" value="5"><label for="5"> Sexta</label></div>
<div class="dia" id="dia" data-id="6"><input id="6" name="diasemana[]" type="checkbox" class="dias_semana" value="6"><label for="6"> Sábado</label></div>
<div class="dia" id="dia" data-id="0"><input id="0" name="diasemana[]" type="checkbox" class="dias_semana" value="0"><label for="0"> Domingo</label></div>

hasClass() checks if the selected element has a particular CSS class. Returns true or false.

addClass() This method is used to add one or more classes to the selected element. obs: does not replace the existing class, just add.

removeClass() used to remove a CSS class from some element (s).

prop() enables or disables a page element.