Bootstrap多选

Question

我试图为PHP引导多个选择复选框。我有以下代码：

<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">
<form action="catcheck.php" method="post">
    <input type="checkbox" name="check_list[]" value="value 1">
    <input type="submit" />
</form>
</span>
</div>
</div>
</div>
</div>

但是我只是得到一个普通的复选框，如何在使用bootstrap css时将其更改为提交给catcheck.php？

Answer 1

以下代码将起作用（希望这是您所需要的）：

<div class="container">
    <div class="row">
        <div class="col-lg-6">
            <div class="input-group">
                <span class="input-group-addon">
                    <form action="catcheck.php" method="post" role="form">
                        <label>
                            <input type="checkbox" name="check_list[]" value="value 1" /> Value 1
                        </label>
                        <label>
                            <input type="checkbox" name="check_list[]" value="value 2" /> Value 2
                        </label>
                        <label>
                            <input type="checkbox" name="check_list[]" value="value 3" /> Value 3
                        </label>
                        <label>
                            <input type="checkbox" name="check_list[]" value="value 4" /> Value 4
                        </label>
                        <button type="submit" class="btn btn-default">Submit</button>
                    </form>
                </span>
            </div>
        </div>
    </div>
</div>

在catcheck.php中

您可以检索$_POST['check_list']的数据，该数据将返回array。你可以从：

开始

echo "<pre>";
print_r($_POST);
echo "</pre>";

修改

以下代码将执行您提出的问题（使用文档参考）

<div class="row">
    <div class="col-lg-6">
        <div class="input-group">
            <span class="input-group-addon">
                <input type="checkbox" name="check_list[]" value="value 1" />
            </span>
            <input type="text" name="text_value[]" class="form-control" />
        </div>
        <div class="input-group">
            <span class="input-group-addon">
                <input type="checkbox" name="check_list[]" value="value 2" />
            </span>
            <input type="text" name="text_value[]" class="form-control" />
        </div>
        <div class="input-group">
            <span class="input-group-addon">
                <input type="checkbox" name="check_list[]" value="value 3" />
            </span>
            <input type="text" name="text_value[]" class="form-control" />
        </div>
        <div class="input-group">
            <span class="input-group-addon">
                <input type="checkbox" name="check_list[]" value="value 4" />
            </span>
            <input type="text" name="text_value[]" class="form-control" />
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
    </div>
</div>

对于对齐，请考虑以下CSS：

.input-group
{
    margin-bottom:10px;
}

您可以通过将col-lg-6缩小为col-lg-4来调整输入区域的大小，依此类推。

小提琴演示：http://jsfiddle.net/27LnT/