1

Estou modificando inputs checkbox escondendo-os e chamando labels para receber a função de checked.

Como poderão ver no FIDDLE e também nos códigos demonstrados abaixo, ao clicar em ordem crescente, o efeito é atribuído todos os checkeds que estão em seguida do clicado.

Porém, o que pude observar enviando $_POST do formulário, é que por mais que o efeito CSS tenha sido atribuído, os inputs não se tornam checkeds, então é um erro de lógica no CSS.

Como deixar os efeitos de label independentes e remover este erro de lógica do código css?

.hidden { display:none }
#checkboxes input[type="checkbox"].drm ~ label {
  float: left;
  cursor: pointer;
  vertical-align: middle;
  margin: 0px 2px 0px 8px;
  width: 37px;
  line-height: 37px;
  text-align: center;
  border: 1px #898989 solid;
  background-color: #FFF;
  color: #3F3F41;
  font-size: 13px;
  text-transform: uppercase;
}

#checkboxes input[type="checkbox"].drm ~ label:hover {
  border:1px #052245 solid;
  background-color:#052245;
  color:#FFF;
}

#checkboxes input[type="checkbox"]:checked.drm ~ label {
  border:1px #052245 solid;
  background-color:#052245;
  color:#FFF;
}
<div id="checkboxes" class="checkboxes ajuste-checkboxes floatright">
  <input id="dorm1" class="hidden drm" type="checkbox" name="dorms[]" value="1">
  <label for="dorm1" class="montserrat fs-16">1</label>										
  <input id="dorm2" class="hidden drm" type="checkbox" name="dorms[]" value="2">
  <label for="dorm2" class="montserrat fs-16">2</label>										
  <input id="dorm3" class="hidden drm" type="checkbox" name="dorms[]" value="3+">
  <label for="dorm3" class="montserrat fs-16">3+</label>
</div>

0

2 Respostas 2

4

Usando radio buttons

Se quer que ao clicar no 3+ inclua todos os anteriores, o ideal não é usar checkbox, mas sim radio button, pois a semântica do checkbox é de seleção independente. A do radio button é de seleção de um valor apenas.

Neste caso você trataria no server side os valores anteriores. Note que com esta técnica, a ordem dos ítens no HTML é invertida, do 3 para o 1.

.hidden { display:none }
#checkboxes { float:left }
#checkboxes label {
  float: right;
  cursor: pointer;
  margin: 0px 2px 0px 8px;
  width: 37px;
  line-height: 37px;
  text-align: center;
  border: 1px solid #898989;
  background-color: #FFF;
  color: #3F3F41;
  font-size: 13px;
}

#checkboxes label:hover,
#checkboxes input:checked ~ label {
  border:1px solid #052245;
  background-color:#052245;
  color:#FFF;
}
<div id="checkboxes" class="checkboxes ajuste-checkboxes">
  <input id="dorm3" class="hidden" type="radio" name="dorms" value="3+">
  <label for="dorm3" class="montserrat fs-16">3+</label>
  <input id="dorm2" class="hidden" type="radio" name="dorms" value="2">
  <label for="dorm2" class="montserrat fs-16">2</label>										
  <input id="dorm1" class="hidden" type="radio" name="dorms" value="1">
  <label for="dorm1" class="montserrat fs-16">1</label>										
</div>


Checkboxes independentes

Se você quer utilizar cada checkbox independentemente, precisa mudar o seletor.

  • O seletor ~ pega todos os elementos seguintes.

  • O seletor + pega apenas o imediatamente seguinte.

Veja a diferença:

.hidden { display:none }
#checkboxes input[type="checkbox"].drm + label {
  float: left;
  cursor: pointer;
  vertical-align: middle;
  margin: 0px 2px 0px 8px;
  width: 37px;
  line-height: 37px;
  text-align: center;
  border: 1px #898989 solid;
  background-color: #FFF;
  color: #3F3F41;
  font-size: 13px;
  text-transform: uppercase;
}

#checkboxes input[type="checkbox"].drm + label:hover {
  border:1px #052245 solid;
  background-color:#052245;
  color:#FFF;
}

#checkboxes input[type="checkbox"]:checked.drm + label {
  border:1px #052245 solid;
  background-color:#052245;
  color:#FFF;
}
<div id="checkboxes" class="checkboxes ajuste-checkboxes floatright">
  <input id="dorm1" class="hidden drm" type="checkbox" name="dorms[]" value="1">
  <label for="dorm1" class="montserrat fs-16">1</label>										
  <input id="dorm2" class="hidden drm" type="checkbox" name="dorms[]" value="2">
  <label for="dorm2" class="montserrat fs-16">2</label>										
  <input id="dorm3" class="hidden drm" type="checkbox" name="dorms[]" value="3+">
  <label for="dorm3" class="montserrat fs-16">3+</label>
</div>

1

Você precisa controlar isso com javascript, atualizei seu fiddler, da uma olhada. A propriedade checked não é acessada por css, o check está indo apenas o escolhido pois o mecanismo da label checava automático.

Segue abaixo um código simples que resolve o problema.

$(document).ready(function(){

  $('.montserrat').bind('click',function(){
      var text = $(this).text();
      var triggerCascade = false;

      $.each($('input[type="checkbox"]'),function(idx,obj){

        //Tornar checked true todos após o escolhido
        if(triggerCascade){
            $(obj).attr('checked',true);
        }

        //Identifica o ponto de corte
        if($(obj).val()==text){
          triggerCascade = true;
        }
      });
  });

});
3
  • Assim que eu clico no número 1, ele continua marcando todos. Preciso que marque somente o que eu cliquei. Eu fui até o FIDDLE que me mandou e não parece estar funcionando. Commented 2/01/2016 às 4:06
  • Obrigado pela ajuda ... aguardo feedback do funcionamento ... Commented 2/01/2016 às 4:09
  • Desculpa, entendi que vc queria em cascata os checked, atualizei o fiddler, mas com a dica do Bacco, que é a correta.
    – RBoschini
    Commented 3/01/2016 às 1:22

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 .