Javascript 用图像按钮替换复选框

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

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

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

例如：

您可以对复选框使用

，然后使用CSS将其隐藏。像这样的方法应该会奏效：

HTML

单击时，您在

标记中放置的任何内容都将激活该复选框

这里有一把小提琴正在演奏。如果删除

显示：无

您会注意到，单击标签内容会选中该框

您可以对复选框使用

，然后使用CSS将其隐藏。像这样的方法应该会奏效：

HTML

单击时，您在

标记中放置的任何内容都将激活该复选框

这里有一把小提琴正在演奏。如果删除

显示：无

您会注意到，单击标签内容会选中该框

toggleClass（）执行以下操作：

toggleClass（）执行以下操作：

---

我想到了高级复选框黑客——这允许您使用隐藏的复选框来控制元素以指示开/关

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

这里有一个使用它的方法

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>

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

你可以根据自己的需要改变它

---

我想到了高级复选框破解-这允许您使用隐藏的复选框来控制元素以指示开/关

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

这里有一个使用它的方法

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>

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

你可以根据自己的需要改变它

---

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

HTML:

---

fiddle:

您不能设计复选框本身，但可以将其隐藏并使用其他元素进行设计，元素的设计将根据复选框的情况进行更改。将设计替换为您喜欢的任何样式

HTML:

---

fiddle:

不需要跨距或div，使用

input:checked+label

进行检查时设置样式。您可能只想使用

input[type=checkbox]

@mistermansam OP隐藏复选框。mistermansam OP可能已经使用了div和span元素，因为他已经构建了一个日历。该示例演示了如何简单地将现有代码包装到标签标签中。以输入为目标也是一个例子。最好的方法是为需要隐藏的复选框指定一个类。不需要span或div，并在使用

input:checked+label

选中时设置样式。您可能只想使用

input[type=checkbox]

@mistermansam OP隐藏复选框。mistermansam OP可能已经使用了div和span元素，因为他已经构建了一个日历。该示例演示了如何简单地将现有代码包装到标签标签中。以输入为目标也是一个例子。最好的方法是为需要隐藏的复选框指定一个类。

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

<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>

/* 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"
}

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

.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;    
}