Jquery toggle function problem with checkbox if else statement

Question

I have a Jquery toggle function. I have made an if else statment to fix the bug when a checkbox i pressed directly its got checked and uncheched. Therefor I have maded a else if statement to check if the checkbox have been checked. But now the checkbox does not even get checked onclick.

Here it is live: http://jsfiddle.net/mvdnj/14/

My Jquery:

categoryDiv.toggle(function () {
    relativeMinimenu.removeClass('hidediv').addClass('someclass').show(200);
    categoryDiv.addClass('clicked').show(200);

    if(   categoryDiv.find('input:checkbox').attr('checked', 'checked') ) { 
        categoryDiv.find('input:checkbox').attr('checked', false);
    } else{
        categoryDiv.find('input:checkbox').attr('checked', 'checked');
    }
}
, function () {
    categoryDiv.removeClass('clicked').find('input:checkbox').prop("checked", false);
    relativeMinimenu.addClass('hidediv');
});

My HTML:

<div style="margin-top: 81px; width: 200px; float: left; background: none repeat scroll 0% 0% rgb(255, 255, 255);" cxlass="searchbox">  
<form method="get" action="/" accept-charset="UTF-8"><div style="margin: 0pt; padding: 0pt; display: inline;"><input type="hidden" value="✓" name="utf8"></div>

        <div id="category" class="menuitem category clicked">
                <label id="search_Company1_is_true" for="search_Company1">Company1 </label>
        <input type="hidden" value="0" name="search[Company1_is_true]"><input type="checkbox" value="1" name="search[Company1_is_true]" id="search_Company1_is_true" checked="checked">
        <div class="counter">1</div>
        </div>
        <div id="minimenu" class="someclass">
        <div class="miniitem">
         <label for="search_feature1">feature1</label>
        <input type="hidden" value="0" name="search[feature1_is_true]"><input type="checkbox" value="1" name="search[feature1_is_true]" id="search_feature1_is_true">
        </div>         <div class="miniitem">
         <label for="search_feature1">feature1</label>
        <input type="hidden" value="0" name="search[feature1_is_true]"><input type="checkbox" value="1" name="search[feature1_is_true]" id="search_feature1_is_true">
        </div>         <div class="miniitem">
         <label for="search_feature1">feature1</label>
        <input type="hidden" value="0" name="search[feature1_is_true]"><input type="checkbox" value="1" name="search[feature1_is_true]" id="search_feature1_is_true">
        </div>
        </div>
        <div class="menuitem category clicked">
        <label for="search_company2">company2</label>
        <input type="hidden" value="0" name="search[company2_is_true]"><input type="checkbox" value="1" name="search[company2_is_true]" id="search_company2_is_true" checked="checked">
        <div class="counter">1</div>
        </div>
 <div class="someclass">
        <div class="menuitem">
        </div>
</div>

    <input type="submit" value="Submit" style="display: none;" name="commit" id="search_submit" class="sdasd">

</form></div>

Luke Stevenson · Accepted Answer · 2011-08-04 23:42:43Z

3

And my suggestion - jsFiddle

Basically much lighter HTML and jQuery code. I did strip off alot of the CSS, so you could re-add that later.

HTML

<form method="get" action="/" accept-charset="UTF-8">
    <div class="checkGroup">
        <label>
            <span>Company1</span>
            <input type="checkbox" name="section" value="1"/>
        </label>
        <div class="payload">
            <label>
                <span>Feature1</span>
                <input type="checkbox" name="sub" value="1"/>
            </label>
            <label>
                <span>Feature2</span>
                <input type="checkbox" name="sub" value="2"/>
            </label>
            <label>
                <span>Feature3</span>
                <input type="checkbox" name="sub" value="3"/>
            </label>
        </div>
    </div>
    <div class="checkGroup">
        <label>
            <span>Company2</span>
            <input type="checkbox" name="section" value="1"/>
        </label>
        <div class="payload">
            <label>
                <span>Feature1</span>
                <input type="checkbox" name="sub" value="1"/>
            </label>
            <label>
                <span>Feature2</span>
                <input type="checkbox" name="sub" value="2"/>
            </label>
            <label>
                <span>Feature3</span>
                <input type="checkbox" name="sub" value="3"/>
            </label>
        </div>
    </div>
</form>

Javascript / jQuery

$(document).ready(function(){

    $('.payload').hide();

    $('.checkGroup > label > input[type="checkbox"]').live('change',function(){
        $t = $(this);
        $t.closest('.checkGroup').find('.payload').toggle( $t.is(':checked') );
        if( !$t.is(':checked') ){
           $t.closest('.checkGroup').find('.payload input[type="checkbox"]')
               .attr('checked',false);
        }
    }).trigger('change');

});

If you are wanting to have Counters showing how many checkboxes in each group are checked, then use the following Javascript / jQuery - jsFiddle Demo

$('.payload').hide();

$('.checkGroup > label > input[type="checkbox"]').live('change',function(){
    $t = $(this);
    $t.closest('.checkGroup').find('.payload').toggle( $t.is(':checked') );
    if( !$t.is(':checked') ){
       $t.closest('.checkGroup').find('.payload input[type="checkbox"]')
           .attr('checked',false);
    }
}).trigger('change');


$('.checkGroup input[type="checkbox"]').change(function(){
   $c = $(this);
   $c.closest('.checkGroup').find('label > span b').text( $c.closest('.checkGroup').find('input[type="checkbox"]:checked').length );
}).trigger('change');

edited Aug 4, 2011 at 23:42

answered Aug 4, 2011 at 14:33

Luke Stevenson

10.3k2 gold badges28 silver badges41 bronze badges

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

3 Comments

Rails beginner Over a year ago

I have tried to add the checkbox counter as seen here jsfiddle.net/GAZqG/5, but the hole menu unfolds: jsfiddle.net/mtYtW/9

Luke Stevenson Over a year ago

Always, where possible, apply the KISS Principle to code - jsfiddle.net/mtYtW/10

Rails beginner Over a year ago

Why is there no payload.show()? Is it the toggle function that does th show() ?

Jacek Kaniuk · Accepted Answer · 2011-08-04 14:24:11Z

1

My proposition: http://jsfiddle.net/GAZqG/3/

You have one error:

if(   categoryDiv.find('input:checkbox').attr('checked', 'checked') )

should be:

if(   categoryDiv.find('input:checkbox').attr('checked') == 'checked' )

or

if(   categoryDiv.find('input:checkbox').attr('checked')  )

answered Aug 4, 2011 at 14:24

Jacek Kaniuk

5,22928 silver badges28 bronze badges

4 Comments

Rails beginner Over a year ago

How do I implement the each function to your solution and how do I get it to like jsfiddle.net/mvdnj/3 where it is not unfolded. Nice that the checkbox counter works as wanted, just it only counts if the maincategory is clicked

Rails beginner Over a year ago

I have tried to hide the subcategory, but now it does take 2 click to onfold jsfiddle.net/GAZqG/12

Jacek Kaniuk Over a year ago

jsfiddle.net/Jacek_FH/GAZqG/13 - i've unchecked category checkbox and updated code on start by triggering click

Rails beginner Over a year ago

Thanks I think I would take the more lightweight solution, I just need to figure out how to implement the checkbox counter :)

sje397 · Accepted Answer · 2011-08-04 15:23:30Z

-1

Here's my attempt: http://jsfiddle.net/mvdnj/21/

The JQuery is:

$('form').delegate('.category', 'click', function() {
    var $this = $(this), $menu = $this.next(), $cb = $('input:checkbox', $this);
    $cb.attr('checked', $menu.css('display') == 'none');
    $menu.toggle();
});

$('form').delegate('.someclass input:checkbox', 'change', function() {
    var $menu = $(this).parents('.someclass'), $cat = $menu.prev();
    var count = $("input:checkbox:checked", $menu).length;
    $('.counter', $cat).text(count);
});

This uses the JQuery .delegate method which is more efficient, creating only two event handlers - one for div click and menu toggle, and one to handle the checkbox counter. Here I have attached the handlers to your only form, since that contains all the relevant divs, but you don't have to, and you could use e.g. 'body' if you prefer.

answered Aug 4, 2011 at 15:23

sje397

41.9k9 gold badges90 silver badges106 bronze badges

1 Comment

sje397 Over a year ago

@Rails beginner - huh? works fine here - what do you mean 'nothing works'?

Collectives™ on Stack Overflow

Jquery toggle function problem with checkbox if else statement

3 Answers 3

3 Comments

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related