Check and uncheck Checkbox items

Question

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 adds the class, to select the div, but when I clicked to disable the checkbox, it does not return the previous color. How to do?

Answer 1

Looking at the specification of ids in the W3C sees that ids not only have to be unique, but must contain at least one letter.

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

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

Just as input ids do not have letters and only numbers:

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

Fixing 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>
<div class="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 what you want is to mark and uncheck, then the method you need is not the addClass but rather 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>
<div class="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>

Answer 2

$(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>
<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>

hasClass() checks whether the selected element has a certain 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 adds.

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

prop() enables or disables a page element.