选中时将类添加到特定复选框

Question

我有一个 foreach 回显，它在我的网站上显示项目列表，我想创建一个系统来添加绿色背景（选中复选框时）并在不再选中时删除该复选框。

echo '<form action="selector.php" id="form1" method="post" target="_self">';

foreach ($Query as $row) {  
  echo '
    <div class="item">
      <img src="something.png">
                            
      <label class="containerPen" style="color: #00ff00">
        Accept                              
        <input type="checkbox"  name="accepted[]" value="'.$row['topic_identification'].'" id="accepted"></input>
        </br>
        <span class="checkmarkPen"></span>
      </label>
                        
      <label class="containerPenX" style="color: #ff0000">
        Decline
        <input type="checkbox" name="declined[]" value="'.$row['topic_identification'].'" id="declined"></input>
        <span class="checkmarkPenX"></span>
      </label>
    </div>          
  ';
}

echo '
  <input type="submit" name="submit" value="submit"> 

  </form>
';

对于每个复选框，我想添加类

.greenbox {
  background-color: green;
}

当它被选中时，当我取消选中它时，我希望它删除该类。

谢谢！

这是 ContainerPen 和 CheckmarkPen 类的 CSS

    .containerPen {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}


.containerPen input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}


.checkmarkPen {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
}


.containerPen:hover input ~ .checkmarkPen {
  background-color: #00ff00;
}


.containerPen input:checked ~ .checkmarkPen {
  background-color: #00ff00;

}


.checkmarkPen:after {
  content: "";
  position: absolute;
  display: none;
}


.containerPen input:checked ~ .checkmarkPen:after {
  display: block;
}


.containerPen .checkmarkPen:after {
  left: 9px;
  top: 5px;
  width: 7px;
  height: 12px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

Answer 1

$onload = <<<EOT
 <script>    
    window.onload = function() {
       const chk = document.querySelectorAll('input[type="checkbox"]');
       for(let x=0; x< chk.length; x++) {
        chk[x].addEventListener('change', function (e) {
          if (e.target.checked) e.target.classList.add('greenbox');
          else e.target.classList.remove('greenbox')
       })
      }
    }
</script>

EOT;

// then add it where you want.

echo $onload;

重要 这种回声称为Heredoc，有两个要求（否则会出错）。初始<<<EOT 之后不能有空格（只是一个换行符），结束EOT; 之前不能有空格。事实上，最后一行只能是EOT;，只要确定空格即可。否则，这是为 html 和 javascript 块等内容形成可读 php 输出的好方法。

Answer 2

您可以在将 id 传递给函数的两个复选框上添加 eventListener 或 onclick 事件。

然后你可以使用 JavaScript 的内置 classlist 属性来添加和删除类。

const addClass = (id) => {
    let checkbox = document.querySelector(`#${id}`);
    checkbox.classList.toggle('greenbox');
}

.greenbox{
  background-color: green;
}

<input type="checkbox" onclick="addClass(this.id)" id="accepted">    
<input type="checkbox" onclick="addClass(this.id)" id="declined">

Answer 3

作为替代方法；

根据您支持的浏览器，您可以通过 CSS :checked 伪类选择器简单地做您想做的事情。

您可以阅读它here 并查看兼容性here。

用法示例是；

input:checked
{
    background-color: green;
}

或者类似的东西；

label input:checked
{
    background-color: green;
}

如果您只想让它影响标签内的输入。请注意，此选择器也将应用于选择中的单选按钮或选项。