Question

我正在寻找一种方法，允许用户选择多个月，日，小时和分钟，用于安排任务。我能想象到的最简单的方法是使用每个元素的复选框，因为它们有一个正确的布尔值我可以用来确定它是否被选中。

在使用这种方法时，我想要用图像替换复选框（用于选中/取消选中的不同图像），或者只是隐藏现有图像并设置文本区域的样式以使用CSS来提供图像的效果。 / p>

如何将默认复选框替换为图像或完全隐藏默认复选框图像？

示例：

enter image description here

Answer 1

您可以使用<label>作为复选框，然后使用CSS将其隐藏。这样的事情应该有效：

HTML

<input type="checkbox" id="check" class="checkbox">
<label for="check"><img src="..."/></label>

CSS

input {
    display:none;
}

您在<label>标记中放置的任何内容都会在点击时激活该复选框。

这是一个行动的小提琴。如果删除display:none;，您会注意到单击标签内容会选中该框。

http://jsfiddle.net/w61zb19y/

Answer 2

toggleClass（）做了这样的事情：

http://jsfiddle.net/zsxyequj/

$('.btn').click(function() {
    $('.btn').toggleClass('col');
});

Answer 3

高级复选框hack浮现在脑海中 - 这允许您使用隐藏的复选框来控制元素以指示开/关

在下面的示例中，单击图像会更改您可以指示是否选择的样式

这是使用它的一种方法

<强> HTML

<table id="calendar">
<tbody>
<tr>
<td>
<!-- duplicate this table cell as many times as needed but
 give each input an id and update the label's for attributes -->
<label for="toggle-1"><img src="someimage.jpg"><!-- this can be an image, text whatever --></label>
<input type="checkbox" id="toggle-1">
<div>select</div>
</td>
</tr>
</tbody>
</table>

<强> CSS

/* Checkbox Hack */

#calendar input[type=checkbox] {
   position: absolute;
   top: -9999px;
   left: -9999px;
}
#calendar label { 
  -webkit-appearance: push-button;
  -moz-appearance: button; 
  display: inline-block;
  margin: 60px 0 10px 0;
  cursor: pointer;
}

/* Default State */
#calendar div {
   background: red;
   width: 400px;
   height: 100px;
   line-height: 100px;
   color: white;
   text-align: center;
}

/* Toggled State */
#calendar input[type=checkbox]:checked ~ div {
   background: green;
}

#calendar input[type=checkbox]:checked ~ div:after {
    content: "ed"
}

这是一个例子，我把它放在一起后，它看起来不像一个单独的元素：

http://jsfiddle.net/8nz1k2wb/

您可以根据自己的需要进行更改

http://timpietrusky.com/advanced-checkbox-hack

Answer 4

你不能设计复选框本身但你可以隐藏它并使用其他元素进行设计，元素的设计将被复选框情况改变。将设计更换为您喜欢的任何设计......

HTML：

<label class="checkbox">
    <input type="checkbox" />
    <span>option</span>
</label>

CSS：

.checkbox input[type="checkbox"]
{
    display: none; 
}

.checkbox span
{
    display: inline-block;
    width: 18px;
    text-indent: 25px;
    border: 1px solid;
}

.checkbox input[type="checkbox"]:checked + span
{
    background: #ccc;    
}

小提琴：http://jsfiddle.net/62ptgwee/1/

用图像按钮替换复选框

4 个答案: