php - Javascript 函数仅从 PHP for 循环输出第一个复选框的值

Question

我有一个 for 循环，它根据从 mySQL 数据库收到的信息形成一个复选框列表。下面是形成复选框的 for 循环(删除了不必要的代码)。

for ($i = 1; $i <= count($descriptionIDsArray); $i++) {
    $statuses = mysql_fetch_assoc(mysql_query(sprintf("SELECT status, description FROM status_descriptions WHERE description_id='$i'")));
    $status = $statuses["status"]; ?>
    <input type="checkbox" value="<?php echo $status ?>" <?php if ($check == 1) {echo "checked='checked'";} ?> onchange="checkBox()" /><?php echo $description ?><br />
<?php } ?>

选中或取消选中一个框会调用以下函数:

<script type="text/javascript">
    function checkBox() {
        var status = $("input:checkbox").val();
        document.getElementById("test").innerHTML = status;
    }
</script>

我能在“测试”中出现的唯一值是第一个复选框的值。如果我在整个初始 for 循环中回显 $status，所有值都正确显示，因此当 Javascript 代码检索相应值时，问题似乎出现了。

Answer 1

如果您仍想保留内联事件处理程序，请将其更改为:

onclick="checkBox(this);"

并将函数更改为:

function checkBox(chk) {
    var status = chk.value;
    document.getElementById("test").innerHTML = status;
}

请注意，onclick 比 onchange 更受复选框和单选按钮的支持。此外，我提供此更改的原因是因为将 this 传递给 checkBox 函数引用了应用了 click 的元素。这样，您就知道在 checkBox 内部，参数 chk 将是刚刚更改的特定复选框。然后只需使用 .value 获取值，因为它是一个简单的 DOM 节点。

无论如何，我建议使用 jQuery 来绑定(bind) click 事件。像这样的东西:

$(document).ready(function () {
    $("input:checkbox").on("click", function () {
        var status = this.value;
        document.getElementById("test").innerHTML = status;
    });
});

但您显然可以使用 $(this).val() 而不是 this.value，但何必呢？如果您使用 jQuery 绑定(bind)事件，只需确保在 HTML 中取出 onchange/onclick 内联事件处理程序即可。

您可以在此处查看为什么使用 input:checkbox 而不仅仅是 :checkbox 作为 jQuery 选择器:http://api.jquery.com/checkbox-selector/