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

本文关键字：复选框 状态 获取 change ON JQUERY | 更新日期: 2023-09-27 18:35:59

如何"获取"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

如何访问复选框的状态和值？

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

如果你的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
  }
});

小提琴

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

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

可以，请将事件添加为属性，如 onchange='function(this);' 。 这会将元素返回给函数，因此您可以获取诸如其 ID 之类的数据，或者只是像这样修改它。

祝你好运！

在 billyonecan 评论之后，这是另一种方法：

$('#containerDIV').on('change', '#CheckBoxList', function (event) {
var id =$(event.target).val();
if (id != null) {
  //do other things
}
});
相关文章：