jQuery：选中的属性未定义更改事件

Question

我看到很多关于这个主题的问题，但 none 已经解决了我的问题。

问题是： 我有一个复选框，当用户单击它时需要选中的属性的新值。

我尝试了不同的事件附加器，比如 on.("change" .. 和 .change(function() .. 但总是 returns "undefined"。我还测试了（带有警报）是否对变量进行了多次赋值，但它们没有。就一次。

请考虑脚本并告诉我您是否知道我做错了什么。或者，如果我应该 post 更多信息。

$(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);
        });
    });

如果我选中 "payed" 复选框，无论新值如何，这都是结果（"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 1

检查以下解决方案将解决您的问题并确保兄弟姐妹class符合您的期望

$(document).ready(function () {
    $("input[type='checkbox']").on('change', function () {
        var $parent = $(this).parent("td");
        var _invoice_id= $parent.siblings("td.name\?ajax_invoice_id").html();

        var _payed="";
        if ($parent.hasClass("name?ajax_payed")) {
           _payed = this.checked;
        } else {
           _payed = $parent.siblings("td.name\?ajax_payed").find("input[type='checkbox']").is(":checked");
        }
        var _sent="";
        if ($parent.hasClass("name?ajax_sent")) {
           _sent = this.checked;
        } else {
           _sent = $parent.siblings("td.name\?ajax_sent").find("input[type='checkbox']").is(":checked");
        }




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

Answer 2

已更新

$('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

Answer 3

为了解释您的实际问题，$(this).parent().siblings() 仅 returns 它的兄弟姐妹加入集合，而不是包含您单击的 checkbox 的 td。

您可以使用 .addBack()，它将包括兄弟姐妹 + 本身 :-

$(document).ready(function() {
  $('#invoice_list :checkbox').on('change', function() {
    var _invoice_id;
    var _payed;
    var _sent;
    $(this).parent().siblings().addBack().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);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table id="invoice_list">
  <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>
</table>

jQuery：选中的属性未定义更改事件

jQuery: the checked property is undefined on change event

checkbox

jquery

onchange

jQuery：选中的 属性 未定义更改事件

jQuery: the checked property is undefined on change event

checkbox

jquery

onchange

jQuery：选中的属性未定义更改事件