Tenho 3 checkboxs:
- Problema no Wifi.
- Problema no Email.
- 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>