SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Nov 2010
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jQuery - Check checkbox.

    http://www.romeotovaradero.com/branc.../dev/form.html

    Hi SitePoint community,

    Here's what I am trying to achieve with this page*. Everytime I check a "Sub-cat", I need "Category #1 " to be checked automatically as well as the checkbox next to the product image (shoes).

    There will be multiple categories but only one product image per page. What is the easiest way to achieve this? I tried some things, but it didn't work.

    Thanks for your time,
    Alex

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    The first thing to do is to attach an onclick event to the checkboxes

    Code javascript:
    $(function () {
        $('div.checkbox-list input:checkbox').click(function () {
            ...
        });
    });

    When someone clicks a checkbox, you need to get the parent for the category that the checkbox belongs to. This lets you restrict things to the checkboxes within only that chosen category.

    Code javascript:
    var parent = $(this).parents('div.checkbox-list');

    Then you work out if the category heading should be active, then set its checked attribute accordingly.

    Code javascript:
    var active = $('div input:checked', parent).length > 0;
    $('h4 input:checkbox', parent).attr('checked', active);

    Before that though, you could also watch for when the heading checkbox is clicked, so that you can check or uncheck all of the subcategory checkboxes.

    Code javascript:
    if ($(this).parents('h4').length > 0) {
        $('div input:checkbox', parent).attr('checked', $(this).attr('checked'));
    }

    Here's the script in full:

    Code javascript:
     
    $(function () {
        $('div.checkbox-list input:checkbox').click(function () {
            var parent = $(this).parents('div.checkbox-list');
            if ($(this).parents('h4').length > 0) {
                $('div input:checkbox', parent).attr('checked', $(this).attr('checked'));
            }
            var active = $('div input:checked', parent).length > 0;
            $('h4 input:checkbox', parent).attr('checked', active);
        });
    });
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Member
    Join Date
    Nov 2010
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Awesome! Much much appreciated! I will definitely try this tomorrow morning! I wish I could understand more clearly all that javascript!

    Thank you again!

  4. #4
    SitePoint Member
    Join Date
    Nov 2010
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Works very well. The only thing I can't figure out how to do (see my page) is when a checkbox in the "checkbox-list" is checked then check the checkbox for #product ...ummm?

  5. #5
    SitePoint Member
    Join Date
    Nov 2010
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Since there's only one product per page I guess I can only check that box by default using this?

    $('#product input:checkbox').attr('checked', true);


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •