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>

我能在"test“中出现的唯一值是第一个复选框的值。如果我在初始的for循环中回显$status，那么所有的值都会正确显示，所以当Javascript代码检索相应的值时，问题似乎就出现了。

Answer 1

如果您仍然希望保留内联事件处理程序，请将其更改为：

onclick="checkBox(this);"

并将该函数更改为：

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

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

无论如何，我建议使用jQuery来绑定click事件。类似于：

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

但是很明显，您可以使用$(this).val()而不是this.value，但是为什么要麻烦呢？如果使用jQuery绑定事件，只需确保去掉HTML中的onchange/onclick内联事件处理程序。

您可以在这里了解为什么使用input:checkbox而不仅仅是:checkbox作为jQuery选择器：http://api.jquery.com/checkbox-selector/

Answer 2

当你这样做的时候

$('input:checkbox').val();

它将返回表单上第一个类型为checkbox的输入，而不一定是单击的输入。

要返回实际被单击的内容，您需要执行以下操作：

$(document).ready(function() {
    $('input:checkbox').bind('click', function() {
        clickBox($(this));
    });
});

function clickBox(field) {
    $('#test').html(field.val());
}

Answer 3

如果您使用jquery，为什么还要为内联事件而烦恼呢？

你可以这样写：

$(':checkbox').change( function(){

      $('#test').html( $(this).val() );
      //`this` is the checkbox was changed 

     //for check if item is checked try:

       $(this).is(':checked') // boolean
});

如果在放置复选框之前传递代码，请确保在加载文档时调用该代码；

$( function(){ 
   //code from above here
});

jQuery通过大量的示例得到了很好的证明。我想你会喜欢的docs.jquery.com