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

Question

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

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

 <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属性指向轮廓（但在焦点上，如在代码中）。 它会影响表格中的所有复选框，并且在选择后不会显示任何复选标记。

Answer 4

document.getElementById("input_checkbox_id").checked = false;