CODEWITHSUNDEEP
jquerycheckboxtoggle
Jitpal
Jitpal

Reputation: 3

jQuery toggleClass and check checkbox

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

Upvotes: 0

Views: 6052

Answers (3)

WebDebz
WebDebz

Reputation: 21

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!

Upvotes: 2

Doug Neiner
Doug Neiner

Reputation: 66191

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.

Upvotes: 3

Reigel Gallarde
Reigel Gallarde

Reputation: 65254

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

Upvotes: 1

Related Questions