Andreas Andreas - 3 months ago 11
jQuery Question

jQuery: the checked property is undefined on change event

I see many questions on this topic but none have resolved my issue.

Trouble is: I have a checkbox and need the new value of the checked property when a user clicks it.

I have tried the different event attachers like on.("change" .. and .change(function() .. but always it returns "undefined".
I have also tested (with alerts) if the assignment to the variables was done more then once, but they dont. Just once.

Please consider the script and tell me if you know what I am doing wrong. Or if i should post more info.

$(document).ready(function () {
$('#invoice_list :checkbox').on('change', function () {
var _invoice_id;
var _payed;
var _sent;
$(this).parent().siblings().each(function () {
if ($(this).hasClass('name?ajax_invoice_id')) {
_invoice_id = $(this).text();
}
if ($(this).hasClass('name?ajax_payed')) {
_payed = $(this).children(':checkbox').prop('checked');
}
if ($(this).hasClass('name?ajax_sent')) {
_sent = $(this).children(':checkbox').prop('checked');
}
});
alert('invoice_id: ' + _invoice_id + '\r\npayed: ' + _payed + '\r\nsent: ' + _sent);
});
});


If i check the "payed" checkbox this is the result no matter the new value (same goes for "sent"): localhost says

html from razor view

<tbody class="clickable">
<tr>
<td class="name?ajax_invoice_id">85</td>
<td>31-10-2015 16:54:27</td>
<td>31-10-2015 00:00:00</td>
<td>31-10-2015 00:00:00</td>
<td>4800,00</td>
<td>6000,00</td>
<td>1200,00</td>
<td>25,00 %</td>
<td>1</td>
<td>6,00</td>
<td>800,00</td>
<td class="name?ajax_sent"><input data-val="true" data-val-required="The Sendt field is required." id="Collection_0__Sent" name="Collection[0].Sent" type="checkbox" value="true" /><input name="Collection[0].Sent" type="hidden" value="false" /></td>
<td class="name?ajax_payed"><input data-val="true" data-val-required="The Betalt field is required." id="Collection_0__Payed" name="Collection[0].Payed" type="checkbox" value="true" /><input name="Collection[0].Payed" type="hidden" value="false" /></td>
</tr>
<tr>
<td class="name?ajax_invoice_id">36</td>
<td>25-10-2015 18:54:35</td>
<td>25-10-2015 00:00:00</td>
<td>25-10-2015 00:00:00</td>
<td>6400,00</td>
<td>8000,00</td>
<td>1600,00</td>
<td>25,00 %</td>
<td>1</td>
<td>8,00</td>
<td>800,00</td>
<td class="name?ajax_sent"><input data-val="true" data-val-required="The Sendt field is required." id="Collection_1__Sent" name="Collection[1].Sent" type="checkbox" value="true" /><input name="Collection[1].Sent" type="hidden" value="false" /></td>
<td class="name?ajax_payed"><input data-val="true" data-val-required="The Betalt field is required." id="Collection_1__Payed" name="Collection[1].Payed" type="checkbox" value="true" /><input name="Collection[1].Payed" type="hidden" value="false" /></td>
</tr>
</tbody>

Answer

Updated

$('table input[type=checkbox]').on('change', function() {
  var _invoice_id = 'not found',
    _payed = 'not found',
    _sent = 'not found',
    $this = $(this);

  $this.closest('tr').children('td').each(function() {
    var $this = $(this);

    if ($this.hasClass('name?ajax_invoice_id')) {
      _invoice_id = $(this).text();
    }
    if ($this.hasClass('name?ajax_payed')) {
      _payed = $(this).children('input[type=checkbox]').prop('checked');
    }
    if ($this.hasClass('name?ajax_sent')) {
      _sent = $(this).children('input[type=checkbox]').prop('checked');
    }
  });

  alert('invoice_id: ' + _invoice_id + '\r\npayed: ' + _payed + '\r\nsent: ' + _sent);
});

jsfiddle

Comments