jQuery toggleClass and check checkbox

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

try:

$("li.imprint").click(function() {
  $(this,"li.imprint").toggleClass('selected')
        .children("input:checkbox:first").attr('checked',true);
});

may I ask why you want to call 'click' on the checkbox?

if you want to check or uncheck checkboxes, read this.

update

try this:

$("li.imprint").click(function() {
      $(this).toggleClass('selected')
      $(':checkbox',this).attr('checked',$(this).is('selected'));
 });

Answer 2

$('li.imprint').click(function() {
    var element = $(this);
    var checkbox = $(':checkbox', element); // correct if necessary!

    element.toggleClass('selected');
    if (element.is('.selected')) {
        checkbox.attr('checked', 'checked');
    }
    else {
        checkbox.removeAttr('checked');
    }
});

Answer 3

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.