Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Megan Huey
5,635 PointsReplace checkbox with image, behave alongside Jquery rules
I am trying to figure out a way to replace checkboxes with my own imagery that represent checkboxes. But I also wrote all the Jquery rules for how the checkboxes behave and interact. I tried to use some code I found that replaces the original checkboxes with other imagery (they can be seen behind the original checkboxes), but they are not synchronizing with the Jquery rules. Firstly, I want the "All" checkbox to be checked from the beginning (which also has all the other checkboxes checked). That is reflected in the original checkboxes but not in the imagery checkboxes. Once that feature is all figured out then I'm going to hide the original checkboxes so that the imagery checkboxes can be seen. If you can find a better way to get them synchronized then I would greatly appreciate it. Here is the codepen: http://codepen.io/Shinju/pen/CFtzc
9 Answers
Christian Andersson
8,712 PointsEDITED ANSWER: Yeah the best way to do it would be to make the actual checkbox hidden and then do some javascript. Here is a small example I did:
<html>
<body>
<input type="checkbox" name="cat" />
<input type="checkbox" name="dog" />
<input type="checkbox" name="bird" />
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/4/4f/Button-Red.svg/40px-Button-Red.svg.png" onClick="cat.checked = (!cat.checked);" />
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/4/4f/Button-Red.svg/40px-Button-Red.svg.png" onClick="dog.checked = (!dog.checked);" />
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/4/4f/Button-Red.svg/40px-Button-Red.svg.png" onClick="bird.checked = (!bird.checked);" />
</body>
</html>
Just add the hidden attribute to the input tags to see hide the checkboxes.
Christian Andersson
8,712 PointsIf you are going to use multiple pictures and checkboxes, then my previous solution isn't viable. Try this instead:
Megan Huey
5,635 PointsI can't quite get that to work. Could you make a more comprehensive codepen so that I can see it in action?
Christian Andersson
8,712 Pointshttp://codepen.io/anon/pen/vpBnf
I removed the hidden element so you can see it working. Just add hidden as above.
Megan Huey
5,635 PointsOkay, I sort of get it but I'm still having trouble implementing it with all of my code. So far I have been able to get the top button to affect the "all" checkbox. In fact all of the other buttons affect the "all" checkbox exclusively.
David Miller
3,526 PointsThat's because you are calling a function that only changes the checkbox with the id="all". You need to pass a different ID in with each different checkbox. Let me know if this works.
function toggleCheck(idValue){
if(document.getElementById(idValue).checked){
document.getElementById(idValue).checked = false;
}
else{
document.getElementById(idValue).checked = true;
}
}
Megan Huey
5,635 PointsThank you for the suggestions. I'm still having trouble but I'll keep trying things.
David Miller
3,526 PointsChange your function to the one I've listed. Then replace onClick=toggleCheck() with onClick=toggleCheck("all").
Next, in the second checkbox, replace onClick=toggleCheck() with onClick=toggleCheck("cat").
Lastly, you need to figure out how to change the final two checkboxes :).
Megan Huey
5,635 PointsI tried implementing that but the buttons aren't affecting the checkboxes. Let me know if I implemented it wrong. My codepen is updated with it.
Megan Huey
5,635 PointsNone of these solutions seem to be working. Can I get a little more help, preferably with a codepen that is complete and functions with my code? This has been really difficult to find a real solution to. I have gone through all of the Jquery lessons on Treehouse. I have even looked in other places on the internet.
Christian Andersson
8,712 PointsThey are working as you can see in the codepen. You're probably doing something wrong in your code.
Megan Huey
5,635 PointsNevermind, found another solution to get it to work for the most part.