如何关联Checkbox与Box Shadow，实现移除带Box Shadow的Checkbox

要实现复选框与盒阴影关联并移除该复选框，需分两步处理：给复选框（或其容器）添加盒阴影样式，然后修正并完善移除逻辑。

1. 为复选框关联盒阴影 #

可以通过CSS直接给复选框元素或它的父容器设置盒阴影效果，既可以默认显示阴影，也可以在复选框选中时触发阴影变化：

/* 给复选框本身添加盒阴影 */
#checkbox1 {
  box-shadow: 0 0 5px rgba(255, 0, 0, 0.5);
}

/* 给包含复选框的容器添加阴影，视觉上与复选框强关联 */
.checkbox-1 {
  padding: 10px;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
  display: inline-block;
  border-radius: 4px;
}

2. 修正并完善移除逻辑 #

原代码存在语法错误、DOM加载顺序问题，以下是修正后的完整实现：

完整代码示例 #

<form>
  <input type="button" value="Delete Checkbox" onclick="deleteCheckbox('checkbox1','checkboxContainer')" />
  
  <div>
    <div class="checkbox-1">
      <div id="checkboxContainer">
        <input id="checkbox1" type="checkbox" />
        <p>JVC200123
          <br>Acme DISC
          <br>1.00$
          <br>Size:700 MB</p>
      </div>
    </div>
  </div>

  <style>
    .checkbox-1 {
      padding: 10px;
      box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
      display: inline-block;
      border-radius: 4px;
    }
    /* 可选：复选框选中时切换阴影样式，强化关联 */
    #checkbox1:checked + p {
      color: #2ecc71;
    }
    .checkbox-1:has(#checkbox1:checked) {
      box-shadow: 0 0 10px rgba(46, 204, 113, 0.6);
    }
  </style>

  <script>
    function deleteCheckbox(checkboxID, parentID) {
      var checkboxObject = document.getElementById(checkboxID);
      var parentObject = document.getElementById(parentID);
      
      // 检查元素是否存在，避免报错
      if (checkboxObject && parentObject) {
        parentObject.removeChild(checkboxObject);
        // 如果需要连带阴影的容器一起移除，可替换为：parentObject.parentElement.remove();
      }
    }
  </script>
</form>

关键修正与优化点 #

• 移除了函数参数末尾的多余逗号，修复语法错误
• 将脚本放在DOM元素之后，确保获取元素时DOM已加载完成
• 添加元素存在性检查，防止因元素已被移除导致的报错
• 可选：通过CSS的:has选择器，实现复选框选中时容器阴影变化，强化复选框与盒阴影的关联关系

扩展：批量移除带阴影的复选框 #

如果需要批量移除所有带盒阴影的复选框，可以用CSS类标记目标元素，再遍历删除：

function deleteAllShadowCheckboxes() {
  const shadowCheckboxes = document.querySelectorAll('.shadow-checkbox');
  shadowCheckboxes.forEach(checkbox => checkbox.remove());
}

对应的CSS：

.shadow-checkbox {
  box-shadow: 0 0 5px rgba(255, 0, 0, 0.5);
}

内容的提问来源于stack exchange，提问作者Victoria Pron