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

could you add some relevant html?

user57508
– user57508

2010-02-09 06:25:06 +00:00
Commented Feb 9, 2010 at 6:25 — user57508
– user57508, Commented Feb 9, 2010 at 6:25

Doug Neiner · Accepted Answer · 2010-02-09 07:03:50Z

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.

edited Feb 9, 2010 at 7:03

answered Feb 9, 2010 at 6:58

Doug Neiner

66.4k14 gold badges111 silver badges118 bronze badges

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

2 Comments

Jitpal Over a year ago

I simplified the selector, it's actually building the form through php loops because each pen is different. Some have multiple color options, some have multiple imprinting locations, then colors per location. It's a pain in the neck really.

Doug Neiner Over a year ago

@Jitpal ... Ah, makes sense. Glad its working for you. The site looks really nice by the way!

WebDebz · Accepted Answer · 2011-12-12 22:18:58Z

This worked for me - it also accommodates multiple check boxes that could each an have a different initial state.

CSS:

.dragable { margin: 4px; border: 1px solid #c6e1ff; line-height: 15px;}
.dragable.selected, .dragable.unselected.selected  {background: #ebf5ff;}
.dragable.unselected {background: #ffffff;}

HTML:

<ul id="sortable">
    <li class="dragable selected ui-state-default">
    <input name="list" type="checkbox"  checked="checked" />Results</li>
    <li class="dragable unselected ui-state-default">
    <input name="list" type="checkbox" />Benefits </li>
</ul>

The Javascript:

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

Hope this helps!

Reigel Gallarde · Accepted Answer · 2010-02-09 07:02:52Z

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'));
 });

edited Feb 9, 2010 at 7:02

answered Feb 9, 2010 at 6:16

Reigel Gallarde

65.4k21 gold badges126 silver badges142 bronze badges

7 Comments

Jitpal Over a year ago

That did not work. The toggleClass portion worked but the checkbox did not check.

Jitpal Over a year ago

I didn't notice your question earlier. I'm building a form where the user can select various colors. So I'm using CSS to hide the checkbox and showing an image. If the user selects the list item, the checkbox gets selected and I can get the formdata.

Jitpal Over a year ago

I tried that and it worked! However, when the user tries to deselect, the class toggles off but the checkbox remains checked.

user57508 Over a year ago

nope ... removeAttr('checked') would be correct. also ... attr('checked', 'checked) would be correct!

Jitpal Over a year ago

I'm a little confused. How can I have it so the user toggles the checkbox status by clicking? If I set it to true or if I set it to false then only one can happen. What would be the way around that?

|

Collectives™ on Stack Overflow

jQuery toggleClass and check checkbox

3 Answers 3

2 Comments

Comments

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related