1

我在 23 列和 7 行的表中有复选框。我想以这样的方式设置复选框的样式，在选中时隐藏复选标记。要识别选中的项目，我需要更改复选框的背景图像，例如用颜色填充它。有人能告诉我如何在 Jquery/Javascript 和 CSS 中做到这一点吗？我尝试使用来自 http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/custom-form-elements.js的 Javascript 插件 在我的 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>

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

4

4 回答 4

0 
$(document).ready(function() {
  $('input:checkbox').on('change', function(){
    $(this).hide();
 }
});
于 2012-08-09T17:59:08.270 回答
0

您可以使用此表单元素样式化 jquery 插件。

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

只是您需要使用没有选中图标的背景图像。

附加了一个示例背景图像，以便在没有选中图标的情况下使用。你可以简单地用原来的替换它。 在此处输入图像描述

于 2012-08-09T18:26:56.353 回答
-1

将此代码放入您的 css 文件中：

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

此处:focus指示选择复选框时的状态。并且 outline 属性指向轮廓（但与代码中的焦点一样）。它将影响您表格中的所有复选框，并且选择后不会显示任何复选标记。

于 2016-04-05T10:09:28.323 回答
-1 
document.getElementById("input_checkbox_id").checked = false;
于 2018-04-12T00:28:32.840 回答