Question

I can’t seem to get this to work. If I remove the checkbox portion of the script the toggle class works but if I add it, then it no longer toggle’s the class. I’m a total amateur at this so I would greatly appreciate any help. I’m using jQuery version 1.4.1. Thanks.

$("li.imprint").click(function() {
  $(this,"li.imprint").toggleClass('selected').children("input[@type=checkbox]")[0].click();
});

So essentially I’m building a web form for people to customize pens. So they need to choose what color imprint they want. Rather than just a boring list of colors, I wanted to show a swatch of the color. So I figured I would create a list, put some checkboxes so they can select the colors and use CSS to hide the actual checkbox so it’s all nice and clean. I saw the code to accomplish this for radio buttons and I got that working fine. I tried to adapt it to checkboxes but the problem was that you can only select one radio button but multiple checkboxes.

To give you a semi-function example. If you head to the beta site, it’s live (not a good practice I know) and try to customize a pen you can see what I’m trying to do. Pensfast.com Beta

Answer 1

Given your updated details, this is what you want:

$("li.imprint").click(function(){
    var $checkbox = $(this).toggleClass('selected').find(':checkbox');
    if($(this).hasClass('selected')) {
      $checkbox.attr('checked','checked');
    } else {
      $checkbox.removeAttr('checked');
    }
})

I am concerned that your classes are incorrect. You reference li.imprint in your question, but the page I visiting on your site had the class of li.Barellimprint Obviously, this answer won’t work if the selectors are wrong. Try changing the first line to :

$("li.Barrelimprint").click(function(){

And this code would work on this page.