How to mark and uncheck div (by checking and unchecking Checkbox) with jQuery

Asked

Viewed 196 times

0

I have 3 checkboxs:

  1. Problem with Wifi.
  2. Problem in the Email.
  3. 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>

javascript jquery css3

4 answers

2


Dude, I would suggest that you put both the icon and the text inside the label, because then when you clicked on either of the two would already mark or deselect the checkbox for. This is because, the way it is, when you click on the icon, the event click on .form-check is not called, which is bad because nothing happens (run the code of the other answers and click directly on the icon to check).

Putting everything into the label, just check when checkbox status is changed and use .toggleClass() to switch the class .active.

In the example below I will leave the checkbox visible to see when it is checked/unchecked:

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

  • Perfect, that’s just what I was looking for ! Thank you very much, you fucking helped me ! ahahha

1

You can use the

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

to remove from all and then yes, apply only to the selected

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

1

Assuming you can have more than one div checked, just check with the if if the clicked element already has the class with the method hasClass.

If you have click remove class, if you have not added.

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

Reference here: https://api.jquery.com/hasClass/

  • It worked, thank you very much !

0

If only to change the state of div, the instruction $(this).toggleClass('active') would work very well. But how to change the input also, then another solution is to use the method hasClass to mimic the behaviour of toggle.

In the code I added two methods that can be found in the following links: hasClass and 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>

  • 1

    It worked perfectly ! Thank you very much man, really !

  • Give nothing! I’m happy to help you.

Browser other questions tagged javascript jquery css3

You are not signed in. Login or sign up in order to post.