Question

I have a list of items which each list having a checkbox like this:

<button>saveButton</button>
<ul id='testInformation'>
    <li><p><input type='checkbox' /><strong>Test information <strong></p></li>
    <li><p><input type='checkbox' /><strong>Test information <strong></p></li>
    <li><p><input type='checkbox' /><strong>Test information <strong></p></li>
    <li><p><input type='checkbox' /><strong>Test information <strong></p></li>
</ul>

Now I need a way to display only the checkbox items, this is not working:

$("#saveButton").click(function()
{
    $("#testInformation input:checked").each(function(key,value)
    {
        alert(value);
    });
});

The output is saying [objecthtmlInputElement]

Answer 1

Your code has so many errors it’s tough to know where to begin without rewriting it. Your saveButton button has no ID which you’re trying to call, you misspelled “function”, you’re trying to alert the value incorrectly, and your checkboxes have no values. Once you fix that, like this jsFiddle, you should be fine.

HTML:

<button id="saveButton">saveButton</button>
<ul id='testInformation'>
    <li><p><input value="a" type='checkbox' /><strong>Test information <strong></p></li>
    <li><p><input value="b" type='checkbox' /><strong>Test information <strong></p></li>
    <li><p><input value="c" type='checkbox' /><strong>Test information <strong></p></li>
    <li><p><input value="d" type='checkbox' /><strong>Test information <strong></p></li>
</ul>

jQuery:

$("#saveButton").click(function() {
    $("#testInformation input:checked").each(function(key, value) {
        alert( $(this).val() );
    });
});