php - 尝试使用多列 HTML PHP 显示多个复选框-6ren

php - 尝试使用多列 HTML PHP 显示多个复选框

转载作者：太空宇宙更新时间：2023-11-04 03:12:43

我已经成功地将我的 MySQL 数据库表中的所有“标签”返回到复选框中，以便用户可以选择几个。

目前它显示为一长列，效率不高，因为模态屏幕尺寸非常小。我想知道是否有办法将其分解并显示为 3 列，而不仅仅是一列。

这是它目前的样子:

Tag modal

关于如何实现我的最终目标的任何想法看起来与此类似:

End Goal

这是我目前的全部代码:

    <?php

      include "db_conx.php";

      try
        {

      $db_conx = new PDO("mysql:host=$mysql_hostname;dbname=$mysql_dbname", $mysql_username, $mysql_password);

        $db_conx->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
        $stmt = $db_conx->prepare('SELECT * FROM tag_details ORDER BY tag_title ASC');
        $stmt->execute();
        //$count = $stmt>rowCount();
        $tags = $stmt->fetchAll(PDO::FETCH_ASSOC);
            }
        catch(Exception $e)
        {
            /*** if we are here, something has gone wrong with the database ***/
        $e->getMessage();
        }


    ?>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>test</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/styles2.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    <script src='js/index.js'></script>
    <script>
    $(function(){
        $('#addPModal').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget);

        });
    });
  </script>
  <script>
  $(function(){
    var limit = 3;
    $('input.checkbox').on('change', function(evt) {
        if($(this).siblings(':checked').length >= limit) {
            this.checked = false;
        }
    });
  });
  </script>
  <style>

.checkbox-inline{
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
}

  </style>

</head>

<body>

    <div class="btn-group-vertical btn-lg pull-right" role="group">

    <div class="btn-group" role="group">
      <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addPModal" data-id="#">Add New Proposal</button>
    </div><p/>
  </div>

  <div id="addPModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="addPModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Showing All Tags </h4>
                <p class="text-danger"><small>(Select up to 3)</small></p>
            </div>
            <div class="modal-body">
                <form id="viewForm">

                    <div class="control-group">
                        <label class="control-label" for="course_details">Select Tags:</label><p></p>
                        <div class="checkbox-inline">
                            <?php foreach($tags as $tag): ?>
                            <div>
                                <input name='tag[]' class="checkbox" type="checkbox" value="<?php echo $tag['tag_code'] ?>"><?php echo $tag['tag_title'] ?></p>
                            </div>
                        <?php endforeach ?>
                    </div>
                </div>
            </form>
        </div>
    </div>
  </div>
</div>

根据建议更改 CSS 的新屏幕截图: Updated

提前致谢!

最佳答案

这是我刚刚编写的一些非常基本的代码来解释我的评论。我不会逐字使用这个，但它有效:

<?php

$list = array('A', 'B', 'C', 'D', 'E', 'F', 'G');
$ctr = 1;

print "<table><tr><td valign=top>";
for ($i = 0; $i < sizeof($list); $i++)
{
    if ($ctr == 5)  { $ctr = 1; print "</td><td valign=top>"; }
    print $list[$i];
    print "<br/>";
    $ctr++;
}
print "</td></tr></table>";
?>

关于php - 尝试使用多列 HTML PHP 显示多个复选框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29267129/

文章推荐： html - 外部 CSS 页面不工作

文章推荐： c - valgrind 显示内存泄漏。我该如何阻止泄漏？

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

php - 尝试使用多列 HTML PHP 显示多个复选框