Change input value [not reflected inside HTML]

Question

I am trying to change input value of a checkbox when it is checked/unchecked. It seems the value is changed (I debugged it via alert()) but is not reflected in the html. That's quite troublesome as I want to pull the value from the html and save it in a database.

                $(document).ready(function(){
                    $("#box:checked").live('click', function(e) {
                        $("#box").val('1');                          
                    });

                    $("#box:not(:checked)").live('click', function(e) {
                        $("#box").val('0');                            
                    });    
                 });

    ... 

      <input id="box" type="checkbox" value="">

    ...

I've been trying to solve this for hours. I came upon a guy who had the same problem, but the workaround was rather clumsy.

thanks for help

Answer 1

You need to use attr for it to be reflected in the HTML.

$("#box").attr("checked", "checked");

http://jsfiddle.net/Xeon06/BwGeX/

Answer 2

<input id="box" type="checkbox" value=""> - the "value" represents the load time html that the browser renders.

Runtime value of the Form elements are not updated in DOM inspectors

A checkbox's "Checked" value is not related to the "Value" attribute, though it can be manipulated to reflect a different value.

You can obtain the checkbox value as $("#box").is(':checked'), this returns true/false