JQUERY ON('change') 获取复选框值和状态

Question

我怎样才能"get" div "containerDIV" 中更改的复选框？

查看：

@model MyModel

<div id="containerDIV">
<ul id="CheckBoxList">
@foreach (XObject t in MyModel.XCollection)
         {
         <li>
           <input type="checkbox" value="@t.id"/>
         </li>
         }
</ul>

在 JavaScript (Jquery) 方面，我有这个：

$('#containerDIV').on('change', '#CheckBoxList', function (event) {

    var id = $(this).val(); // this gives me null
    if (id != null) {
      //do other things
    }

});

很明显 $this 不是复选框，它是 div containerDIV 或 checkBoxList

如何获取复选框的状态和值？

Answer 1

如果 input 在 DOM 加载后未动态创建，您可以调用：

$('#CheckBoxList input[type=checkbox]').change(function() {

  var id = $(this).val(); // this gives me null
  if (id != null) {
    //do other things
  }

});

或要使用 .on()，您只需定位正在被点击的 input：

$('#CheckBoxList').on('change', 'input[type=checkbox]', function() {

  var id = $(this).val(); // this gives me null
  if (id != null) {
    //do other things
  }

});

FIDDLE

Answer 2

如果可以，请将事件添加为属性，例如 onchange='function(this);'。这个 returns 函数的元素，所以你可以获得数据，比如它的 ID，或者像那样修改它。

祝你好运！

Answer 3

根据 billyonecan 评论，这是另一种方法：

$('#containerDIV').on('change', '#CheckBoxList', function (event) {

var id =$(event.target).val();
if (id != null) {
  //do other things
}

});

Answer 4

我让它正常工作的方法是使用 .is(':checked')。

$('selector').change(function (e) {
        // checked will equal true if checked or false otherwise
        const checked = $(this).is(':checked')); 
});

JQUERY ON('change') 获取复选框值和状态

JQUERY ON('change') get checkbox value and state

html

javascript

c#

asp.net-mvc

jquery

祝你好运！