javascript - 按钮复选框不保存选中状态

Question

我正在使用 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/>&nbsp;&nbsp;'.$name.'</label>';
                } else {
                    echo '<label class="btn btn-default"><input type="checkbox" name="data-invoice-salesman[]" value="'.$i.'" />&nbsp;&nbsp;'.$name.'</label>';
                }
            }       
        ?>

没有复选框的复选框代码(需要修复吗？)

   <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/>&nbsp;&nbsp;'.$name.'</label>';
                } else {
                    echo '<label class="btn btn-default"><input type="checkbox" name="data-invoice-salesman[]" value="'.$i.'" />&nbsp;&nbsp;'.$name.'</label>';
                }
            }       
        ?>

Answer 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>