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

时间：2015-03-25 21:44:33

标签： php html css

我已经成功地将我的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

提前致谢！

3 个答案:

答案 0 :(得分：1)

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

<?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>";
?>

答案 1 :(得分：1)

你有很多方法可以解决这个问题。看起来您正在使用Twitter Bootstrap，因此您可以使用.checkbox-inline类来inline all your checkbox inputs。

从那里你需要决定如何分解每组三个。您可以通过将它们包装在自己的DIV中，或者在每第三个之后添加一个中断标记<br>来完成此操作。

我喜欢使用 modulus 运算符执行此类任务，可能看起来像这样：

<?php
     $count = 0;
     $length = count($tags);
     foreach ( $tags as $tag ) :
?>
     <input name='tag[]' type='checkbox' value="<?php echo $tag['tag_code'] ?>"> <?php echo $tag['tag_title'] ?>
<?php
     $count++; // you could pre-incremment $count in the if statement
     if ( $count % 3 === 0 && $count !== $length ) {
          echo '<br>';
     }
     endforeach;
?>

此外，输入标记是自动关闭的，您不需要</input>或<input/>。您将文档指定为HTML5，<input>将执行此操作（不斜杠）。

答案 2 :(得分：0)

这是一个使用CSS列并且只使用表单元素的简单方法。它看起来像这样：

Column Screenshot

兼容性： IE 10 + and all modern browsers using -moz and -webkit prefixes.

HTML

  • 包含字段集中的输入和标签（而不是该div），并用图例标题：

    <fieldset class="checkbox-inline">
    <legend>Checkbox List</legend>

    <!-- inputs and labels go here -->
</fieldset>

    注意：该字段集不适用于Firefox，继续使用div 。有appears to be a long term bug in Firefox阻止CSS列处理fieldset元素:(我将保留我的示例的fieldset作为在这里使用的理想元素，但使用div进行生产。

  • 丢弃输入周围的div并将输入包装在其标签中;这可以确保标签文本与复选框对齐：

    <label for="check1">
    <input id="check1" type="checkbox">Checkbox
</label>

使用PHP

  • 使用PHP，它看起来像这样：

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

添加一些简单的CSS

  • 使用放置在.checkbox-inline字段集类上的CSS列：

    .checkbox-inline {
  -webkit-columns: 3;
  -moz-columns: 3;
  columns: 3;
}

  • 标签为display: block，因此每个标签都是一行，white-space: nowrap确保文字始终与输入对齐

  • 根据需要设置字段集的样式，下面的示例包含一些填充和display: inline-block，因此不需要声明宽度

完整示例

＆＃13;
＆＃13; 
.checkbox-inline {
  -webkit-columns: 3;
  -moz-columns: 3;
  columns: 3;
  border: solid 5px #F00;
  padding: 40px 10px 5px;
  display: inline-block;
  position: relative;
}
.checkbox-inline label {
  display: block;
  white-space: nowrap;
}
legend {
  position: absolute;
  top: 10px
}
＆＃13; 
<!-- Use a div and not a fieldset here for the moment due to Firefox bug -->
<fieldset class="checkbox-inline">
  <legend>Checkbox List</legend>
  <label for="check1">
    <input id="check1" type="checkbox">Checkbox
  </label>

  <label for="check2">
    <input id="check2" type="checkbox">Checkbox
  </label>

  <label for="check3">
    <input id="check3" type="checkbox">Checkbox
  </label>

  <label for="check4">
    <input id="check4" type="checkbox">Checkbox
  </label>

  <label for="check5">
    <input id="check5" type="checkbox">Checkbox
  </label>

  <label for="check6">
    <input id="check6" type="checkbox">Checkbox
  </label>
</fieldset>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题