replace standard checkbox with a custom image [duplicate]

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 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
– BretW, Commented Jan 21, 2015 at 21:48

SketchyTurtle · Accepted Answer · 2015-01-21 21:34:02Z

0

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

answered Jan 21, 2015 at 21:34

SketchyTurtle

4251 gold badge5 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Justin Wood Over a year ago

How would this differentiate between clicked and unclicked?

SketchyTurtle Over a year ago

isnt OP hiding it when it is clicked?

Collectives™ on Stack Overflow

replace standard checkbox with a custom image [duplicate]

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related