Grow your CSS skills. Land your dream job.

Best way to track & store checked status of multiple checkboxes

  • # January 10, 2013 at 6:59 am

    Hi all!

    Hope you’re well! I’m still working on this to-do list site and I’m a little stuck for the best way to track if one of the items has been marked as done, and then how to update the cookie that stores the to-do to only load a checked checkbox.

    I’ve seen things like unload and onbeforeunload which seem like a possible way to go, checking through each checkbox on a page unload then storing the status in the cookie for next time the user visits the page.

    But I’m wondering if there are any other suggestions? W3schools thinks onunload doesn’t work in Opera or Chome (shockingly!) which would be a definite no-go if that is the case.

    Thanks guys!

    Oh, [link to the site](http://todo.lukeseager.com “link to the site”) if you want to have a mooche around.

    [EDIT] This is a vanilla JavaScript project, just as an FYI :)

    # January 10, 2013 at 11:38 am

    Just a quick, top-of-the-head idea, but what about this:

    -When the checkbox is clicked, fire an event that checks whether it’s checked

    -If it is, add the “checked” attribute

    -Update a variable that writes to the cookie

    This should eliminate any need for beforeunload, as it’s done in real-time.

    # January 10, 2013 at 12:02 pm

    * (There’s also the `:checked` pseudo class in CSS3)[http://www.w3.org/TR/css3-selectors/#checked]
    * (This article could also be of help)[http://www.thecssninja.com/css/custom-inputs-using-css]

    # January 10, 2013 at 12:04 pm

    haha, I’m working on exactly that idea right now! Great minds!

    In a bit of a pickle with it though! I’ve managed to get it so when a checkbox is checked, it pulls down the cookie for that particular item. But now I need to find just the `input` element inside that variable. Searching around there doesn’t seem to be a way to do this? Ideally I’d just type `variableName.getElementsByTagName(input)` but the `getElementByTagName` only works on `document.` humpf!

    # January 10, 2013 at 12:05 pm

    @Atelierbram Thanks, That pseudo class has come in handy before, however this is more about changing one part of a JavaScript variable instead of styling something differently. Thanks for the links though! :)

    # January 10, 2013 at 12:32 pm

    Hmm, so, since you can’t search for a tag name within the variable (because the variable is a string, and not part of the DOM), you’d have to do a replace, look for ‘input’ and replace it with ‘input checked=”checked”‘ or something.

    Would it be cleaner to modify the DOM, then grab the wrapping element (tr.list-row) to save to the cookie?

    Edited to add: Don’t forget to also accomodate for situations where the checkbox is checked, then shortly thereafter unchecked, in which case any edits to the element structure will need to be undone.

    # January 10, 2013 at 12:43 pm

    I was thinking that, instead of pulling the cookie down and trying to edit that, just get all the code from the row and save over the cookie that’s already there. Might be a better way to go with less code too maybe.

    # January 10, 2013 at 1:24 pm

    Hmm, I have the `tr` element after an `onClick` I put in the `tr`. But I can’t seem to get anything other than “[object HTMLTableRowElement]“, It wont give me the value or the code of the object itself, only seems to tell me what it is :/

    # January 10, 2013 at 2:16 pm

    Mini update: I was being a bit of an idiot. Managed to get the HTML from inner and outerHTML. Now just need to get this checked status in place and should be golden :)

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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".