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

Question

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

下面是我的复选框的代码：

 <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();
 }
});

Answer 2

您可以使用这个表单元素样式jquery插件。

http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

你只需要使用没有勾选图标的背景图片。

附加了一个样本背景图像，以使用没有选中的图标。您可以简单地将其替换为原始版本。

​

Answer 3

将以下代码放入css文件中：

 input[type="checkbox"]:focus{
 outline:none !important; }

在这里，:focus表示选中复选框时的状态。outline属性指向轮廓(但与代码中的焦点相同)。它将影响您表中的所有复选框，并且在选择后不会显示任何复选标记。