Javascript 选中“输入”复选框时更改div颜色

我有一个复选框：

<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>

Armuts-
bekämpfung

现在，如果我选中输入复选框，div（我认为是类卡片）的边框应该变成红色。 我已经尝试过使用

input[type='checkbox']：after{…

和

input[type='checkbox']：checked:after{…}

但是这只是覆盖了当前的复选框，所以如何访问边框并使其变为红色？

您可以使用javascript

var checkbox=document.getElementById（“myCheckbox”）；
checkbox.oninput=函数（）{
//当它发生变化时，将调用它
如果（复选框。选中）{
//检查过了
控制台日志（“已检查”）；
}否则{
//没有检查
控制台日志（“非”）；
}
}

您可以使用JavaScript（本例中为JQuery）

您可以使用一个函数来切换给定变量“isColoured”的背景色状态

var iscolored=false；
函数changeColour（）{
如果（已着色）{
$（“.card body”）.css（“背景色”、“透明”）；
iscolored=false；
}否则{
$（“.card body”）.css（“背景色”、“红色”）；
iscolored=true；
}
}
Armuts-
bekämpfung

您可以添加您的css吗？使用css您无法访问父级（使用JavaScript）。之后是不访问上一个元素->答案很好，只是添加JQuery不是必需的。document.getElementsByClassName（“卡体”）[0]。style.backgroundColor=（event.target.checked）？“红色”：“unset”；