CODEWITHSUNDEEP
javascriptjqueryhtmlcsscheckbox
user470760
user470760

Reputation:

Replace checkbox with image button

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

Upvotes: 1

Views: 4680

Answers (4)

wunth
wunth

Reputation: 634

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

Upvotes: 1

Eran.E
Eran.E

Reputation: 940

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/

Upvotes: 0

Dryden Long
Dryden Long

Reputation: 10182

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/

Upvotes: 2

garryp
garryp

Reputation: 5766

toggleClass() does this sort of thing:

http://jsfiddle.net/zsxyequj/

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

Upvotes: 2

Related Questions