replace standard checkbox with a custom image

Question

I am using the dijit/form/CheckBox to successfully allow a user to toggle the visability of a Variable. I would like to replace the checkbox with a custom image, that would show a highlight if its checked. Do I need to recreate the wheel to get this done, or can I amend what I have thus far?

The checkbox is created with:

function updateAerial_1977Visibility(checkbox) {
    // alert("working");
    if (checkbox.checked) {
        Aerial_1977.show();
    } else {
        Aerial_1977.hide();
    }
}

and the checkbox is displayed in the HTML with:

<input id="Checkbox3" name="mycheck" type="checkbox" 
       data-dojo-type="dijit/form/CheckBox" value="agreed" 
       style="padding-right: 20px;" onclick="updateAerial_1977Visibility(this);" />
<label for="mycheck">77</label>

This answer got me close - using http://jsfiddle.net/hqZt6/1/ I was able to add a border to the css for the "checked" state. However, but if I tried to switch the red colored block to a custom image, it did not seem to work. Before I try and stumble through this for an answer, can you confirm that this approach would work? — BretW, Jan 21 '15 at 21:48

score 0 · Answer 1 · answered Jan 21 '15 at 21:34

0

try adding a src="path/to/image" into the input

answered Jan 21 '15 at 21:34

SketchyTurtle

423
1
5
20

How would this differentiate between clicked and unclicked? – Justin Wood Jan 21 '15 at 21:36
isnt OP hiding it when it is clicked? – SketchyTurtle Jan 21 '15 at 21:40

replace standard checkbox with a custom image

1 Answers1