HTML / JavaScript 当 checkbox=True 时，改变 <TD> 颜色答案

【问题标题】：HTML / JavaScript When checkbox=True, change <TD> colorHTML / JavaScript 当 checkbox=True 时，改变 <TD> 颜色
【发布时间】：2013-07-02 10:57:05
【问题描述】：

几年没有编程，我正在尝试我认为是一个相对基本的 HTML 表单，并且遇到了一些我不再知道如何做的事情。

首先，我有一个 5x10 的复选框表。每当检查任何框时，我都希望执行相同的代码（如果已经检查了4个复选框，请扔一个错误，否则继续）。

如何让此代码在所有复选框上运行，而无需为每个单独的按钮添加“onclick”？

其次，当一个复选框被选中时，我想改变它所包含的元素的背景颜色。

最后，有没有一种简单的方法可以将复选框图像替换为带编号的球或带标签的按钮？

根据要求，到目前为止，我的代码在这里： https://www.dropbox.com/s/mem6egamsojq18g/DrawTicket.html

【问题讨论】：

向我们展示你到目前为止所做的事情。
对于颜色，您可以完全使用 CSS3 来完成。首先我只能用 jquery (javascript 框架) (;
使用jsfiddle.net 提供代码（也可以内联添加）。
@FranciscoPresencia CSS？缺少父选择器？怎么样？
其实刚刚找到了一个SO question very similar to yours，就是用:checked这个CSS伪类做的。如果这是您提出的唯一问题，那将是一个骗局。请注意缺少对 IE 6-8 的支持。

标签： javascript html forms

【解决方案1】：

好吧，这里有点hackish，纯JS版本。应该让你开始很好......

HTML：

<table id="table">
    <tr>
        <td><input type="checkbox"/></td>
        <td><input type="checkbox"/></td>
    </tr>
     <tr>
        <td><input type="checkbox"/></td>
        <td><input type="checkbox"/></td>
    </tr>
     <tr>
        <td><input type="checkbox"/></td>
        <td><input type="checkbox"/></td>
    </tr>
</table>

CSS，仅用于视觉辅助：

td {
    border: 1px solid #cccccc;
}

td.checked {
    background: #ff0000;
}

JS：

var handler = function(event) {
    if(event.target.parentNode.className.indexOf('checked') < 0 ) {
        event.target.parentNode.className += ' checked';
    } else {
        event.target.parentNode.className = 
                event.target.parentNode.className.replace(' checked', '');
    }
};

var table = document.getElementById('table');
table.addEventListener('click', handler);

还有JSFiddle 一起玩。

附言

至于用图片替换它 - 网上有很多解决方案，其中大多数不是跨浏览器 - 见这里：How to style checkbox using CSS?

【讨论】：

你好这个方法只选择第一个单元格，如何选择整行并使其变为绿色？
你能帮我吗？

【解决方案2】：

我认为更简单的方法是使用 jquery：在头部（或作为正文中的最后一个元素）

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">
  $(function(){
    $('input:checkbox').click(function(){
      if ($(this).is(':checked')) {
        $(this).parent().css('background-color', 'green');
      } else {
        $(this).parent().css('background-color', 'white');
      }
    });
  });
</script>

我正在为第三个问题考虑一个很好的解决方案

【讨论】：