如何用jQuery实现点击动态生成的复选框时弹出其值

你的代码存在几处问题，以下是修正后的完整方案：

1. 修正PHP代码（解决value为空的问题） #

原代码中复选框的value赋值时未使用echo，导致实际渲染后value是空字符串，同时标签上的重复类会引发不必要的事件触发，修正如下：

<?php
//$class=trim("YEAR 1");
$rec = mysqli_query($db, "SELECT * from studentbyclass where CLASS='$class'  "); 
                    
while($row = mysqli_fetch_array($rec)){
?>

<label class="form-check form-switch">
<input class="form-check-input students" type="checkbox"  value="<?php echo $row["STUDENT-ID"];?>" checked>
<span class="form-check-label"><?php echo $row["STUDENT-NAME"];?></span>
</label>
       
<?php
}
?>

• 给$row["STUDENT-ID"]添加echo，确保学生ID能正确渲染到value属性中
• 移除span标签上的.students类，避免点击文字标签时触发无意义的事件（span本身没有value属性）

2. 修正jQuery代码（解决取值错误的问题） #

原代码中this.val()写法错误，this是原生DOM元素，没有val()方法，可通过两种方式修正：

// 方式一：用jQuery包装原生元素
$(".students").on('click' , function(){         
    let val = $(this).val();
    alert(val);           
});

// 方式二：直接读取原生DOM的value属性
$(".students").on('click' , function(){         
    let val = this.value;
    alert(val);           
});

• 使用let声明变量，避免全局变量污染
• 两种方式都能正确获取到复选框的value值并弹窗显示

内容的提问来源于stack exchange，提问作者lotsu julius