根据数组值使用 jquery 设置复选框

Posted 2023-05-09

【中文标题】根据数组值使用 jquery 设置复选框

【英文标题】：Set checkbox with jquery based on array value

【发布时间】：2016-07-30 06:57:08

【问题描述】：

我正在使用 Bootstrap 中的表格，其中一列用于复选框。该表填充了来自 mysql 数据库的值。在数据库中，复选框的列的值为 1 或 0。如果值为 1，我希望检查复选框。我有此代码，但它仅适用于第一个复选框。我如何将它用于所有复选框？这是我的代码。

                <tbody>
<?php while($row = $sql->fetch())  ?>
  <tr>
    <td><?php echo $row['Opleiding_ID']; ?></td>
    <td><?php echo $row['Opleiding']; ?></td>
    <?php $checked = $row['Hidden']; ?>

    <script type="text/javascript">
$(document).ready(function()


                  var arr<?php echo $row["Opleiding_ID"]; ?> = <?php echo json_encode($checked); ?>;

              if (arr<?php echo $row["Opleiding_ID"]; ?> == "1") 

    $("#mycheckbox<?php echo $row["Opleiding_ID"]; ?>").prop('checked', true);
                   else 
                    $("#mycheckbox<?php echo $row["Opleiding_ID"]; ?>").prop('checked', false);  
                  
                  );



</script>        
    <td><input type="checkbox" id="mycheckbox<?php echo $row["Opleiding_ID"]; ?>" name="checks" value="" class="check"></td>
  </tr>
  <?php  ?>
</tbody>

【问题讨论】：

你的标记是什么样的？您当前正在为mycheckbox 使用基于 ID 的选择器，并且通常 ID 字段应该是唯一的。如果我们看到您的标记是什么样的，它可能会使这更容易一些。

您在 if 语句中执行分配运算符 '='，它应该是比较运算符 '=='

复选框来自数据库。所以每条新记录在表中都有一个新的复选框。所以只有一个id。我将更新我的代码，以便您查看所有内容。

【参考方案1】：

$(document).ready(function() 
        var arr = <?php echo json_encode($checked); ?>;
        $.each(arr, function(index) 
            if (arr[index] == "1") 
                $("#mycheckbox").prop('checked', true);
            
        );
    );

未经测试，可能有问题。但这是您应该采取的正确方法。循环运行元素。

【讨论】：

注意到@Rion Williams 的评论。他是对的，如果你有那个标记，把你的 ID 改成一个类

$(this) 会给你对象，而不是值。您可能需要 arr[index] == "1"。此外，不需要使用 $(arr)

将 arr 转换为 jquery 对象

你是对的，@DinoMyte！没想到。谢谢指正！

你可以进一步改进代码：$("#mycheckbox").prop('checked',arr[index] == "1")

我再次更新了我的代码。但即使有你所有的建议，它也行不通。我已经使用了 id 和 class 没有任何结果。还有更多建议吗？谢谢。

【参考方案2】：

如果你有一个自动增量 id，你可以像这样在 javascript 代码中回显它

<script type="text/JavaScript">
    $(document).ready(function()

                  var arr<?php echo $row["id"]; ?> = <?php echo json_encode($checked); ?>;
                      $.each(arr<?php echo $row["id"]; ?>, function(index) 
                  if (arr<?php echo $row["id"]; ?>[index] == "1") 

    $(".check<?php echo $row["id"]; ?>").prop('checked', true);
                  
                             );
            );
</script>


    <td><input type="checkbox" id="mycheckbox" name="checks" value="" class="check<?php echo $row["id"]; ?>"></td>
  </tr>
  <?php  ?>
</tbody>

如果您要遵循该代码，您应该创建一个像这样的变量 $id = $row["id"];少打字

【讨论】：

我无法让它以这种方式工作。如何让我的 id 自动递增？现在我的 id 只是“mycheckbox”。添加的数字使其成为另一个ID。还是我错了？

while 循环它的内容，如果你有 class= check 在您的数据库中有 3 个 ID 编号为 1 和 2 和 3 将有 3 个带有 check1 check2 check3 的表格 如何使 id 自动递增 这里是 w3schools w3schools.com/sql/sql_autoincrement.asp

的教程

更新了我原来的帖子。得到它与你的建议艾哈迈德一起工作。我使用 id 而不是自动增量字段的类。

【参考方案3】：

如果您动态生成表格，您可以在此处设置您的复选框值，如下所示。 JS：

 $(document).ready(function()
// your arr from php
  var arr = ['value' : 0 , 'name' :'Itme1' , 'description':'description1',
            'value' : 1 , 'name' :'Itme2' , 'description':'description2',
            'value' : 0 , 'name' :'Itme3' , 'description':'description3',
            'value' : 1 , 'name' :'Itme4' , 'description':'description4'];

    var tableContent = '';
       $.map(arr, function (item) 
         checked=  (item.value) ? "checked" : "" ;
         tableContent+='<tr><td><input type="checkbox"'+checked+ '></td><td>' + item.name + '</td><td>' + item.description + '</td><td><input type="button" value="Edit" ></td></tr>';  
      );
    $("#myTbody").html(tableContent);
);

例如：http://jsfiddle.net/tg5op333/39/