javascript - 如何在选中时隐藏复选框中的复选标记

Question

我在 23 列和 7 行的表格中有复选框。我想以这样的方式设置复选框的样式，即在选中时隐藏复选标记。为了识别选中的元素，我需要更改复选框的背景图像，例如用颜色填充它。有人能告诉我如何在 Jquery/Javascript 和 CSS 中完成吗？我尝试使用 Javascript 插件 http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/custom-form-elements.js在我的 php 页面中包含这个 Js 添加了 class= 样式。它似乎不起作用。

这是我的复选框的代码:

 <div id="checkboxes">
          <table id="custom-interval-tbl" class="form-layout" cellpadding="0" cellspacing="0">
              <?php foreach($days_of_week as $short => $long): ?>
                <tr>
                      <th scope="row"><?echo"<b>".$short."</b>"?></b></th>
                      <?php for($hour = 0; $hour <= 23; ++$hour): ?>
                        <td><input type="checkbox" class="styled" name="custom_interval[<?=$short?>][<?=$hour?>]" value="<?=$hour?>" <?=isset($custom_intervals[$short][$hour]) ? 'checked="checked"' : ''?> /></td>
                      <?php endfor; ?>
                </tr>
                 <?php endforeach; ?>
          </table>
          </div>
        </div>

我需要更改脚本中的任何内容吗？感谢我们的建议。

Answer 1

$(document).ready(function() {
  $('input:checkbox').on('change', function(){
    $(this).hide();
 }
});