1

I am looking for a way to allow for the user to select multiple months, days, hours and minutes where this will be used for scheduling tasks. The easiest way I can imagine doing this is using checkboxes for each element since they have a boolean properly I can use to determine if its selected or not.

In using this approach, I would like to either entire replace the checkbox with an image (different image for checked/unchecked) or just hide the existing image and style the text area to give the effect of an image using CSS.

How can I replace the default checkbox with an image or hide the default checkbox image entirely?

Example:

enter image description here

Improve this question

4 Answers 4

Reset to default
2

toggleClass() does this sort of thing:

http://jsfiddle.net/zsxyequj/

$('.btn').click(function() {
    $('.btn').toggleClass('col');
});
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

2

You can use a <label> for your checkbox and then hide it using CSS. Something like this should work:

HTML

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

CSS

input {
    display:none;
}

Anything you put inside the <label> tags will activate that checkbox when clicked.

Here is a fiddle of it in action. If you remove the display:none; you'll notice that clicking on the label contents checks the box.

http://jsfiddle.net/w61zb19y/

Improve this answer

2 Comments

No need for spans or divs, just use the label and style it when checked with input:checked + label. You would probably want to hide just the checkboxes using input[type=checkbox]
@mistermansam OP may very well already have div and span elements in use as he has a calendar built. The example shows how he can simply wrap his existing code in label tags. Targeting input was also just an example. The best way would be to assign a class to the check boxes that need to be hidden.
1

The advanced checkbox hack comes to mind - this allows you to use a hidden checkbox to control an element to indicate on/off

In this example below, clicking the image changes the styles by which you can indicate selected or not

Here's one way to use it

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

And here's an example I put together after playing a little more where it doesn't look like a separate elements:

http://jsfiddle.net/8nz1k2wb/

It's something you can change to suit your needs

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

Improve this answer

Comments

0

you can't design the checkbox itself but you can hide it and use other element for the design, the design of the element will be changed by the checkbox situation. replace the design to whatever you like...

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

fiddle: http://jsfiddle.net/62ptgwee/1/

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.