Input checkbox change div color when checked

Question

I have a checkbox:

<div class="col checkboxgroup">
  <label for="project_need_ar">
   <div class="card text-center card_themen">
    <div class="card-body"> <img class="icon-image" src="../icons_svg_/24.svg" style="width:50px;" />
     <p>Armuts-<br>bekämpfung</p>
   </div>
  </div>
</label>
 <input type="checkbox"value="a" id="project_need_a" name="project_need" class="">
</div>

now if I check the input checkbox the border from the div (class card I think) should turn red. I already tried to with input[type='checkbox']:after {...)andinput[type='checkbox']:checked:after {...} but this just overlay the current checkbox, so how can I access the border and make them turn red?

With css you cannot access a parent ( use JavaScript ). after is not to access the previous element -> https://developer.mozilla.org/en-US/docs/Web/CSS/::after — Antonio Torres, Apr 21 '20 at 11:45

score 1 · Answer 1 · answered Apr 21 '20 at 11:41

You can use javascript

var checkbox = document.getElementById("myCheckbox");

checkbox.oninput = function(){
  //this is called when it changes
  if(checkbox.checked){
    //it is checked
    console.log("checked");
  }else{
    //it isn't checked
    console.log("not");
  }
}

<input type="checkbox" id="myCheckbox">

It isn't easy to style the checkbox, so you will most likely have to totally create a new one. Go to this stackoverflow question How to style a checkbox using CSS or this w3schools article https://www.w3schools.com/howto/howto_css_custom_checkbox.asp.

Hope this was helpful!

score 0 · Answer 2 · answered Apr 21 '20 at 11:46

You can use JavaScript (JQuery in this example).

You can have a function which toggles the state of the background-color given a variable 'isColoured'

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link href="https://fonts.googleapis.com/css?family=Montserrat">
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <style>
        
    </style>
    <script>
        var isColoured = false;
        function changeColour(){
            if(isColoured){
                $(".card-body").css("background-color", "transparent");
                isColoured = false;
            }else{
                $(".card-body").css("background-color", "red");
                isColoured = true;
            }
            
        }
    </script>
</head>
    <div class="col checkboxgroup">
      <label for="project_need_ar">
       <div class="card text-center card_themen">
        <div class="card-body"> <img class="icon-image" src="../icons_svg_/24.svg" style="width:50px;" />
         <p>Armuts-<br>bekämpfung</p>
       </div>
      </div>
    </label>
     <input type="checkbox"value="a" id="project_need_a" onclick="changeColour();" name="project_need" class="">
    </div>
</body>
</html>

For border highlighting:

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link href="https://fonts.googleapis.com/css?family=Montserrat">
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <style>
        
    </style>
    <script>
        var isColoured = false;
        function changeColour(){
            if(isColoured){
                $(".card-body").css("border-color", "transparent");
                $(".card-body").css("border-style", "none");
                $(".card-body").css("border-width", "0px");
                isColoured = false;
            }else{
                $(".card-body").css("border-color", "red");
                $(".card-body").css("border-style", "solid");
                $(".card-body").css("border-width", "1px");
                isColoured = true;
            }
            
        }
    </script>
</head>
    <div class="col checkboxgroup">
      <label for="project_need_ar">
       <div class="card text-center card_themen">
        <div class="card-body"> <img class="icon-image" src="../icons_svg_/24.svg" style="width:50px;" />
         <p>Armuts-<br>bekämpfung</p>
       </div>
      </div>
    </label>
     <input type="checkbox"value="a" id="project_need_a" onclick="changeColour();" name="project_need" class="">
    </div>
</body>
</html>

The answer is fine just to add that JQuery is not mandatory. document.getElementsByClassName("card-body")[0].style.backgroundColor = (event.target.checked)? "red" : "unset"; — Antonio Torres, Apr 21 '20 at 11:55

Input checkbox change div color when checked

2 Answers2