1

Tenho o seguinte 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>

Com o seguinte jQuery

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

Class:

.selecionado {
    background-color: red;
}

Quando eu clico ele adiciona a class, pra selecionar a div, mas quando eu clicou para desabilitar o checkbox, não volta a cor anterior. Como fazer?

2 Respostas 2

4

Olhando para a especificação de ids na W3C vê que os ids não só tem de ser únicos, como tem de conter pelo menos uma letra.

Você está a quebrar estas duas regras. Os seus divs tem ids repetidos:

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

Assim como os ids dos inputs não tem letras e apenas números:

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

Corrigindo essas duas coisas já funciona:

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

Mas se o que pretende é marcar e desmarcar, então o método que precisa não é o addClass mas sim o 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>

4
  • Mas a questão é desmarcar.. ai o background teria de retornar ao original.. 15/10/2017 às 20:04
  • @AndréBaill então o que pretende é o toggleClass e não addClass. Veja a minha edição
    – Isac
    15/10/2017 às 20:05
  • Aqui no meu não consegui adaptar. Me parece diferente. 15/10/2017 às 20:15
  • @AndréBaill Repare que eu retirei o id do <div> assim como mudei os ids dos <input>. Confirme como tem essa parte no seu código
    – Isac
    15/10/2017 às 20:16
1

$(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() verifica se o elemento selecionado possui uma determinada classe CSS. Retorna true ou false.

addClass() este método serve para adicionar uma ou várias classes ao elemento selecionado. obs: não substitui a classe já existente, somente adiciona.

removeClass() utilizada para remover uma classe CSS de algum(s) elemento(s).

prop() habilita ou desabilita um elemento da página.

3
  • Quase isso, mas dessa forma ele mantém apenas um selecionado... E preciso manter todos que foram selecionados. 15/10/2017 às 20:11
  • Sim, mas você notou que os demais não ficaram vermelhos? 15/10/2017 às 20:16
  • @AndréBaill acho que é isso. resposta editada
    – user60252
    15/10/2017 às 20:44

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .