0
I have 3 checkboxs:
- Problem with Wifi.
- Problem in the Email.
- Problem at the Portal.
When the user clicks on any of the checkBoxs jQuery calls the div .active
and automatically a color is filled around the checkbox. How do I do jQuery for the user to have the option to uncheck the checkbox and disappear the div leaving null the checkbox value unchecked? 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>
Perfect, that’s just what I was looking for ! Thank you very much, you fucking helped me ! ahahha
– Moises Abreu