css - 如何仅使用 CSS 渲染选中的复选框？

Question

这可能非常愚蠢而且有点尴尬，但我正在努力弄清楚如何使用 CSS 使复选框“选中”？

情况是，如果父母有一个班级setup（例如），我希望所有setup作为父母的复选框都被选中。我猜这在纯 CSS 中是不可行的，对吗？我不介意使用 JS，但我很好奇是否可以切换复选框的状态及其父级的状态（通过切换类）。

这是一个可以玩的小提琴。

Answer 1

被“选中”的复选框不是一种样式。这是一种状态。CSS 无法控制状态。您可以通过使用复选标记和列表的背景图像来伪造某些东西，但这并不是您所说的。

更改复选框状态的唯一方法是在 HTML 中的服务器端或使用 Javascript。

编辑

这是那个伪代码的小提琴。事实是，这毫无意义。

这意味着您需要将 CSS 类添加到服务器上要让 jQuery “检查”的元素。如果您这样做，您不妨在使用时添加实际元素属性。

http://jsfiddle.net/HnEgT/

所以，这让我想知道我是否只是误解了你在说什么。我开始认为有一个客户端脚本在改变状态，而您正在寻找监控？

编辑 2

根据评论的一些反映和一些快速挖掘，如果您想要一个 JavaScript 解决方案来检查复选框，如果有其他 JavaScript 插件可能会更改属性值（没有事件触发器的东西），唯一的解决方案是做一个简单的“超时”循环，不断检查给定类的一组元素并更新它们。

然后，您所要做的就是设置您希望此超时触发的频率。从某种意义上说，它是一种“长轮询”形式，但实际上并没有去服务器进行数据更新。都是客户端。我想这就是所谓的“超时”。=P

这是我在该主题上找到的教程：

http://darcyclarke.me/development/detect-attribute-changes-with-jquery/

我会看看我是否可以制作一个 jQuery 示例。

更新

这是一个超时侦听器的 jsfiddle，用于检查 CSS 类是否添加到复选框并将其状态设置为“已选中”。

http://jsfiddle.net/HnEgT/5/

我添加了第二个函数，每隔几秒钟将“已检查”类随机添加到复选框。

我希望这会有所帮助！

Answer 2

在纯CSS中是不可能的。

但是，您可以有一个附加到类的所有元素的 jQuery 事件，从而触发基于类分配的检查或取消检查。

或许是这样的：

function toggleCheck(className){
 $("."+className).each( function() {
  $(this).toggleClass("checkedOn");
 });
 $(".checkedOn").each( function() {
  $(this).checked = "checked";
 });
}