使用jQuery切换AJAX生成的checkbox复选框value值为0或1的实现问题

问题根因 #

你当前代码失效的核心原因有两个：

1. 动态生成的元素没有做事件委托：AJAX生成的复选框在页面初始加载绑定change事件时还不存在，直接绑定只会作用于页面初始就存在的元素，新增的元素不会触发绑定的事件
2. 选中状态判断的选择器语法错误：$input.is("checked")的写法不对，状态伪类需要加冒号，正确写法是$input.is(":checked")

实现方案 #

你可以直接使用事件委托绑定复选框的变更事件，同时同步切换value值，代码如下：

// 将事件委托到页面初始就存在的父级容器#department上，作用于内部所有复选框
$('#department').on('change', 'input[type="checkbox"]', function() {
  const $curCheckbox = $(this);
  const isChecked = $curCheckbox.is(':checked');
  // 切换value值：选中为1，未选中为0
  $curCheckbox.val(isChecked ? 1 : 0);
  // 测试打印，生产环境可删除
  console.log('选中状态：', isChecked, '当前value：', $curCheckbox.val());
});

如果需要在AJAX生成复选框后，就对齐初始选中状态和value值，可以在AJAX渲染完成的回调里加这段初始化代码：

$('#department input[type="checkbox"]').each(function() {
  $(this).val($(this).is(':checked') ? 1 : 0);
});

内容的提问来源于stack exchange，提问作者Nisarg Shah