javascript - 输入复选框在选中时更改 div 颜色

Question

这个问题已经有答案了:

Is there a "previous sibling" selector? (33 个回答)

已关闭 3 年前。

我有一个复选框:

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

现在，如果我检查输入复选框，div 的边框(我认为是类卡)应该变成红色。我已经尝试过 input[type='checkbox']:after {...)和input[type='checkbox']:checked:after {...}但这只是覆盖了当前的复选框，那么我如何访问边框并使它们变成红色？

Answer 1

您可以使用 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">

设置复选框的样式并不容易，因此您很可能必须完全创建一个新的复选框。转到这个 stackoverflow 问题 How to style a checkbox using CSS或这篇 w3schools 文章 https://www.w3schools.com/howto/howto_css_custom_checkbox.asp .

希望这对您有帮助!