我正在使用bootstrap,我正在尝试将复选框转换为按钮,该按钮显示何时按下(已选中或未选中)。如果我保持代码显示复选框,它就完美了。如果我将代码保留为带标签的按钮,则“已选中”按钮无法正确加载(它们会保存)。
解决: 事实证明,我只需要为已经有效的复选框回显“btn-group active”。
复选框代码带复选框(可行)
<div class="btn-group" id="salesman" data-toggle="buttons"></div>
<h5>Salesman :</h5>
<?php
$salesman = json_decode($invoice['Invoice']['salesman'], true);
$salesman_names = array(1 => "User1",2 => "User2",3 => "User3",4 => "User4",5 => "User5");
foreach ($salesman_names AS $i => $name) {
if ($salesman[$name] == "checked") {
echo '<label class="btn btn-default"><input type="checkbox" name="data-invoice-salesman[]" value="'.$i.'" checked/> '.$name.'</label>';
} else {
echo '<label class="btn btn-default"><input type="checkbox" name="data-invoice-salesman[]" value="'.$i.'" /> '.$name.'</label>';
}
}
?>
Checkbox Code w / out Checkboxes(需要修复?)
<div class="btn-group" id="salesman" data-toggle="buttons">
<h5>Salesman :</h5>
<?php
$salesman = json_decode($invoice['Invoice']['salesman'], true);
$salesman_names = array(1 => "User1",2 => "User2",3 => "User3",4 => "User4",5 => "User5");
foreach ($salesman_names AS $i => $name) {
if ($salesman[$name] == "checked") {
echo '<label class="btn btn-default"><input type="checkbox" name="data-invoice-salesman[]" value="'.$i.'" checked/> '.$name.'</label>';
} else {
echo '<label class="btn btn-default"><input type="checkbox" name="data-invoice-salesman[]" value="'.$i.'" /> '.$name.'</label>';
}
}
?>
答案 0 :(得分:1)
我认为你搜索了一个切换按钮,请查看下面的示例。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default active">
<input type="checkbox" checked autocomplete="off"> Checkbox 1 (pre-checked)
</label>
<label class="btn btn-default">
<input type="checkbox" autocomplete="off"> Checkbox 2
</label>
<label class="btn btn-default">
<input type="checkbox" autocomplete="off"> Checkbox 3
</label>
</div>
&#13;
答案 1 :(得分:0)
从我收集的内容中,您想要将标签的点击链接到复选框的切换(可以隐藏)。
<label for="me">
Blah1
<input type="checkbox" id="me">
</label>