How do I make the value of the checkbox appear?

I have been trying to make a simple "click and submit your element". I don't believe I did it justice since it won't work, and the best I can say is I have tried to come at it from each angle I could think of in order to have the value of that specific checkbox appear up on the screen not just the console.

 <div class="elementWheel">
        
        <input type="checkbox" value="water" class="water pickColor" />
        <input type="checkbox" value="wind" class="wind pickColor" />
        <input type="checkbox" value="earth" class="earth pickColor" />
        <input type="checkbox" value="fire" class="fire pickColor" />

        <input type="button" id="demo" value="demo" />

    </div>
    <script type = "text/javascript" src = "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1.min.js"></script>
    <script type="text/javascript">
        $("#demo").live("click", function () {
            $("input:checkbox[class=pickColor]:checked").each(function () {
                alert("Class: " + $(this).attr("class") + " Value: " + $(this).val());
            });
        });
    </script>