The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Toggle checkboxes [CodePen included]

  • # February 25, 2013 at 8:42 am

    I have a checkbox that when checked should toggle checkboxes in a form below.

    The function works perfectly on first iteration, however any time after that the checkboxes in the form are not checked.

    I’ve included a simplified version of my code in the CodePen below

    # February 25, 2013 at 9:14 am

    Solved, simply replace the attr function with prop and it will work as expected.

    # February 25, 2013 at 9:30 am

    This reply has been reported for inappropriate content.

    Weirdest thing! Seems to me like a bug with setting checkboxes with attr('checked', ...);, you code should definitely be working. I found a workaround though, by simulating a click (also changed your code a bit so you can remove the onclick handler from your html)

    $(function() {
    var checkBoxes = $(‘.activity’);

    $(‘#get-last-quarter’).change(function() {
    var checked = $(this).prop(‘checked’);

    checkBoxes.each(function() {
    var $this = $(this);

    if ($this.prop(‘checked’) != checked)

    Edit: Ugh, I should refresh before submitting comments… xD Your solution is better.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed