Question

How to hide/show items on a webpage using jquery upon a click event on a checkbox (suppose there are multiple checkboxes each with its related items)?

Answer 1

Some javascript code in your page waits for the page to load and then registers for the click event on a checkbox and when the value of the checkbox is changed, the code looks at the current value and then hides/shows other items on the web page.

In some instances, it might even make an ajax call to the server to obtain new content and then insert that content into the page.

In jQuery, you could do this:

$(document).ready(function() {
    $("#showRelatedItems").click(function() {
        $(".relatedItems").toggle($(this).prop("checked"));
    });
});

This would work for a checkbox with id="showRelatedItems and a set of related items with class="relatedItems".

Working demo: http://jsfiddle.net/jfriend00/egYJj/