1

我有一个 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 代码检索相应值时似乎会出现问题。

4

3 回答 3

1

当你这样做

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

它返回表单上第一个复选框类型的输入，不一定是单击的那个。

要返回实际单击的那个，您需要执行以下操作：

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

function clickBox(field) {
    $('#test').html(field.val());
}
于 2012-10-30T18:42:14.047 回答
1

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

onclick="checkBox(this);"

并将函数更改为：

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

请注意，onclick复选框和单选按钮比 is 更好地支持onchange。此外，我提供此更改的原因是因为传递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/

于 2012-10-30T18:54:52.243 回答
0

如果您使用 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

于 2012-10-30T18:55:55.433 回答