0

Tenho 3 checkboxs:

  1. Problema no Wifi.
  2. Problema no Email.
  3. Problema no Portal.

Quando o usuário clicar em qualquer um dos checkBoxs o jQuery chama a div .active e automaticamente é preenchido uma cor ao redor do checkbox. Como faço em jQuery para o usuário ter a opção de desmarcar o checkbox e desaparecer a div deixando nulo o value do checkBox desmarcado? Help!

$('.form-check').click(function(){
    
    $(this).addClass("active");

});
.fas{
      font-size: 3rem;
     
    }
    .form-check{
      padding: 10px 35px 50px 0; 
    }
    .form-check-input{
      display: none;
    }
    .active{
      color: #fff;
      background: #28a745;
      width: 80%;
      border-radius: .2rem;
    }
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.css">
</head>
<body>
  <div class="container">
    <div class="col-md-4">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" value="1"  id="checkWifi" name="checkWifi">
          <label class="form-check-label" for="checkWifi"><i class="fas fa-wifi"></i></label>
          <small id="emailHelp" class="form-text text-muted">Problema no Wifi?</small>
      </div>
    </div>
    <div class="col-md-4">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" value="2" id="checkEmail" name="checkEmail">
        <label class="form-check-label" for="checkEmail"><i class="fas fa-envelope-open-text"></i></label>
        <small id="emailHelp" class="form-text text-muted">Problema no Email?</small>
      </div>
    </div>
    <div class="col-md-4">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" value="3" id="checkPortal" name="checkPortal">
        <label class="form-check-label" for="checkPortal"><i class="fas fa-user-graduate"></i></label>
        <small id="emailHelp" class="form-text text-muted">Problema no Portal?</small> 
      </div>
    </div>

    
  </div>
  <script
  src="https://code.jquery.com/jquery-3.4.1.js"
  integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
  crossorigin="anonymous"></script>

</body>
</html>

0

4 Respostas 4

2

Cara, eu sugeria que você colocasse tanto o ícone quanto o texto dentro da label, pois assim quando você clicasse em qualquer dos dois já marcaria ou desmarcaria o checkbox referente no for. Isso porque, da forma que está, quando você clica no ícone, o evento click no .form-check não é chamado, o que é ruim, pois nada acontece (execute o código das outras respostas e clique diretamente no ícone para conferir).

Colocando tudo dentro da label, basta verificar quando o estado do checkbox é alterado e usar .toggleClass() para alternar a classe .active.

No exemplo abaixo vou deixar o checkbox visível para poder ver quando ele é marcado/desmarcado:

$('.form-check :checkbox').on("change", function(){
    
    $(this).parent().toggleClass("active");

});
.fas{
   font-size: 3rem;
}
.form-check{
   padding: 10px 35px 50px 0; 
}
.form-check-input{
   /*display: none;*/
}
.active{
   color: #fff;
   background: #28a745;
   width: 80%;
   border-radius: .2rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.css">
<div class="container">
    <div class="col-md-4">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" value="1"  id="checkWifi" name="checkWifi">
          <label class="form-check-label" for="checkWifi">
               <i class="fas fa-wifi"></i>
               <small id="emailHelp" class="form-text text-muted">Problema no Wifi?</small>
         </label>
      </div>
    </div>
    <div class="col-md-4">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" value="2" id="checkEmail" name="checkEmail">
        <label class="form-check-label" for="checkEmail">
             <i class="fas fa-envelope-open-text"></i>
             <small id="emailHelp" class="form-text text-muted">Problema no Email?</small>
         </label>
      </div>
    </div>
    <div class="col-md-4">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" value="3" id="checkPortal" name="checkPortal">
        <label class="form-check-label" for="checkPortal">
            <i class="fas fa-user-graduate"></i>
            <small id="emailHelp" class="form-text text-muted">Problema no Portal?</small> 
         </label>
      </div>
    </div>
</div>

1
  • Perfeito, é justamente isso que estava procurando ! Muito Obrigado, você me ajudou pra caralho ! ahahha Commented 1/08/2019 às 0:29
1

Pode usar o

$('.form-check').removeClass("active");

pra remover de todos e ai sim, aplica só no selecionado

$(this).addClass("active");
1

Supondo que podem ter mais de uma div marcada, basta fazer a verificação com o if se o elemento clicado já tem a classe com o método hasClass.

Se tiver o click remove a classe, se não tiver adiciona.

$('.form-check').click(function(){
    
    if ($(this).hasClass("active")){
      $(this).removeClass("active");
    } else {
      $(this).addClass("active");
    }
});
.fas{
      font-size: 3rem;
     
    }
    .form-check{
      padding: 10px 35px 50px 0; 
    }
    .form-check-input{
      display: none;
    }
    .active{
      color: #fff;
      background: #28a745;
      width: 80%;
      border-radius: .2rem;
    }
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.css">
</head>
<body>
  <div class="container">
    <div class="col-md-4">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" value="1"  id="checkWifi" name="checkWifi">
          <label class="form-check-label" for="checkWifi"><i class="fas fa-wifi"></i></label>
          <small id="emailHelp" class="form-text text-muted">Problema no Wifi?</small>
      </div>
    </div>
    <div class="col-md-4">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" value="2" id="checkEmail" name="checkEmail">
        <label class="form-check-label" for="checkEmail"><i class="fas fa-envelope-open-text"></i></label>
        <small id="emailHelp" class="form-text text-muted">Problema no Email?</small>
      </div>
    </div>
    <div class="col-md-4">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" value="3" id="checkPortal" name="checkPortal">
        <label class="form-check-label" for="checkPortal"><i class="fas fa-user-graduate"></i></label>
        <small id="emailHelp" class="form-text text-muted">Problema no Portal?</small> 
      </div>
    </div>

    
  </div>
  <script
  src="https://code.jquery.com/jquery-3.4.1.js"
  integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
  crossorigin="anonymous"></script>

</body>
</html>

Referência aqui: https://api.jquery.com/hasClass/

1
  • Funcionou, muito obrigado ! Commented 31/07/2019 às 20:48
0

Se fosse apenas para mudar o estado da div, o instrução $(this).toggleClass('active') funcionaria muito bem. Mas como precisa alterar o input também, então outra solução é utilizar o método hasClass para imitar o comportamento de toggle.

No código adicionei dois métodos que podem ser encontrados nos seguintes links: hasClass e children.

$('.form-check').click(function() {

  var $div = $(this);

  if ($div.hasClass('active')) {
    $div.removeClass('active');
    $div.children('input[type=checkbox]').attr('checked', false);
  } else {
    $div.addClass('active');
    $div.children('input[type=checkbox]').attr('checked', true);
  }

});
.fas {
  font-size: 3rem;
}

.form-check {
  padding: 10px 35px 50px 0;
}

.form-check-input {
  display: none;
}

.active {
  color: #fff;
  background: #28a745;
  width: 80%;
  border-radius: .2rem;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.css">

<div class="container">
  <div class="col-md-4">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="1" id="checkWifi" name="checkWifi">
      <label class="form-check-label" for="checkWifi"><i class="fas fa-wifi"></i></label>
      <small id="emailHelp" class="form-text text-muted">Problema no Wifi?</small>
    </div>
  </div>
  <div class="col-md-4">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="2" id="checkEmail" name="checkEmail">
      <label class="form-check-label" for="checkEmail"><i class="fas fa-envelope-open-text"></i></label>
      <small id="emailHelp" class="form-text text-muted">Problema no Email?</small>
    </div>
  </div>
  <div class="col-md-4">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="3" id="checkPortal" name="checkPortal">
      <label class="form-check-label" for="checkPortal"><i class="fas fa-user-graduate"></i></label>
      <small id="emailHelp" class="form-text text-muted">Problema no Portal?</small>
    </div>
  </div>


</div>
<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>

2
  • 1
    Funcionou perfeitamente ! Muito obrigado cara, de verdade ! Commented 31/07/2019 às 20:48
  • Dê nada! Fico feliz em ajudá-lo. Commented 31/07/2019 às 20:48

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 .