Html checkbox displayed with jquery. Need to check if checkbox value changed (checked/unchecked)

Question

Here placed all code http://jsfiddle.net/tUukv/

Below is checkbox created/displayed without jquery. If checkbox value changes, then value in is_checkbox_changed0 changes to 1. All works.

<br>input type='checkbox' without jquery. All works<br>
<table><tr><td>
<input type='checkbox' id='checkbox_to_update0' name='checkbox_to_update0' class='checkbox_to_update_changed0' value = 'true' >
</td></tr></table>

<table><tr><td>
<input type="text" name="is_checkbox_changed0" id="is_checkbox_changed0" style='width:30px;'>
<script>
$(".checkbox_to_update_changed0").change(function(){
document.getElementById('is_checkbox_changed0').value = 1;
});
</script>
</td></tr></table>

But need to display checkbox using jquery

Created such code

<br>But with jquery input type='checkbox' does not work<br>

<script language="javascript" type='text/javascript'>
$(document).ready(function() {
$('#existing_company_error').html("Checkbox <input type='checkbox' id='checkbox_to_update' name='checkbox_to_update' class='checkbox_to_update_changed' value = 'true' ><br>");
});
</script>

<div id="existing_company_error"></div>


<table><tr><td>
<input type="text" name="is_checkbox_changed" id="is_checkbox_changed" size="" style='width:30px;'>

<script>
$(".checkbox_to_update_changed").change(function(){
//$('input[type="checkbox"]').change(function(){
//$(".checkbox_to_update_changed").on("change", function () {
document.getElementById('is_checkbox_changed').value = 1;
});
</script>

</td></tr></table>

If I change checkbox value (either check, or uncheck the checkbox) value in is_checkbox_changed must change to 1. But it does not changes.

Please, advice what need to correct?

Solution Oh, I am stupid. document.getElementById('is_checkbox_changed').value = 1; must be inside $(document).ready(function() {. all works

I know about is(':checked'). But also need change value if checkbox is unchecked. — user2465936
– user2465936, Commented Sep 28, 2013 at 6:31

Arun P Johny · Accepted Answer · 2013-09-28 06:23:17Z

3

Since the element is created dynamically, use event delegation

$(document).on('change', ".checkbox_to_update_changed", function(){
    document.getElementById('is_checkbox_changed').value = 1;
});

or

jQuery(function($){
    $('#existing_company_error').on('change', ".checkbox_to_update_changed", function(){
        document.getElementById('is_checkbox_changed').value = 1;
    });
})

answered Sep 28, 2013 at 6:23

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Szymon · Accepted Answer · 2013-09-28 06:49:53Z

0

Use

$(document).on('change', '.checkbox_to_update_changed', function(){

});

You must use $(document) to attach click handlers to dynamically added elements, because $(document) always exists, so you can always attach to it. Specifically attaching to an element that does not exist will not work in that case. Also, it may be a good idea to wrap all jQuery code that interacts with the DOM with $(document).ready(), to ensure everything is loaded before attaching events and such.

(This is my first stack overflow post!)

edited Sep 28, 2013 at 6:49

Szymon

43k16 gold badges99 silver badges115 bronze badges

answered Sep 28, 2013 at 6:27

Uriah Sanders

641 silver badge4 bronze badges

Collectives™ on Stack Overflow

Html checkbox displayed with jquery. Need to check if checkbox value changed (checked/unchecked)

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related