0

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

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

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

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

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

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

4

2 回答 2

2

好吧，这是一个有点骇人听闻的纯 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一起玩。

附言

至于用图像替换它 - 网上有很多解决方案，其中大多数不是跨浏览器 - 请参见此处：如何使用 CSS 设置复选框样式？

于 2013-07-02T02:45:05.047 回答
1

我认为更简单的方法是使用 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>

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

于 2013-07-02T02:41:21.800 回答