Store Input/checkbox data to json storage - on button press

I've been meticulously searching for some json tutorials, however I've only come accross as to how I can predefine variables.

I would like to take the input or data from a checkbox, and store it somewhere when a button is pressed to be used later when the form is completely filled out.

For Example:

<ul>
        <li><input type="checkbox" name="special[]" value="op1" />1</li>
        <li><input type="checkbox" name="special[]" value="op2" />2</li>
        <li><input type="checkbox" name="special[]" value="op3" />3/li>
</ul>
    <input type="button" name="submit" value="Next" id="nextquestion1" />

When you press the submit button, a jquery click function will store which are true

{"choices": {"op1": true,"op2": false,"op3":true}}

However I'm not sure how to do this in practice because I am new to this :)

I would also like to know how I can store an input string as well; such as DATE: 17/08/2011 - pressing button NEXT will store that data in a variable.

开发者_如何学Go

Thanks for reading my question everyone! :))

---

If you're simply storing the data on the client side, I'm not sure that JSON is the way to go. Have you considered jQuery's .data() method?

http://api.jquery.com/jQuery.data/

EDIT

//Attach to click even of submit button
$('#nextquestion1').click(function() {
    $('#myUL :checkbox').each(function () {
        $this = $(this);
        $.data(document.body, $this.attr('value'), $this.is(':checked'));
    });
});

//Attach to event of button that will alert persisted values
$('#getStoredValues').click(function () {   
    $.each($.data(document.body), function(key, value) {
        alert('Name= '+ key + ' Value= ' + value);
    });
});

Here's a working Fiddle.

Side Note: You're third <li> is not properly closed.