Question

多年没有编程，我正在尝试我认为相对基本的HTML表单，并且遇到了一些我不知道该怎么做的事情。

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

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

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

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

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

Answer 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一起玩。

P.S。

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

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

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

HTML / JavaScript当checkbox = True时，更改颜色

2 个答案: