Billing Address Same as Shipping Address jQuery

Question

I am having trouble getting the Billing Address to copy over the Shipping Address using jQuery. I have successfully done this using a plain-jane form with no custom jQuery elements. But when I add the custom UI to the checkbox, it seems to break the code. I have tried several code changes but none of them are working.

When a user clicks on "My billing address is the same as my shipping address", nothing is happening. Here is my jQuery code:

<script type="text/javascript">
$(document).ready(function(){ 
    $('#check-address').click(function(){
        if($('#check-address').attr('checked')){
            $('#address-field1').val($('#address-field').val());
            $('#city-field1').val($('#city-field').val());
            $('#zip-field1').val($('#zip-field').val());
            var state = $('#state-field option:selected').val();
            $('#state-field1 option[value=' + state + ']').attr('selected','selected');
        } else { 
            //Clear on uncheck
            $('#address-field1').val("");
            $('#city-field1').val("");
            $('#zip-field1').val("");
            $('#state-field1 option[value=Nothing]').attr('selected','selected');
        };

    });
});
</script>

Any help is greatly appreciated!

Answer 1

Demo of options

$('#check-address').attr('checked')

should could be

$('#check-address').is(':checked')

---

As pointed out in comments, there are many ways to skin this cat. http://jsfiddle.net/sRt6G/1/ this.checked seems to be the simplest.

Answer 2

You are using jquery 1.7 . You should use prop instead of attr

  $('#check-address').prop('checked')



       $(elem).attr('checked')    // returned true (Boolean) prior to 1.6
        $(elem).attr('checked')   // now returns "checked" (string) versions after 1.6
        $(elem).prop('checked')    // now returns true (Boolean) versions after 1.6

Answer 3

The plugin you're using to prettify your checkbox (or whatever it does), is replacing the <input type="checkbox"/> with a div, and simulating events on the checkbox.

It doesn't propagate a click event, but it does propagate a change, so you should listen for that instead;

$('#check-address').change(/* function */);

To improve your code you might want to substitute the check for attr('checked') with prop('checked'), but your code will still work regardless. Reasons for this are outlined on the jQuery documentation for prop(); http://api.jquery.com/prop