检查按钮-复选框的状态答案

【问题标题】：Check the state of buttons-checkbox检查按钮-复选框的状态
【发布时间】：2016-12-24 12:57:34
【问题描述】：

我想做一个看起来像按钮的复选框：当它被选中时，按钮看起来被按下；未选中时，按钮看起来未按下。

当我使用引导程序时，我自然会想到使用data-toggle="buttons-checkbox"。但是验证复选框的状态似乎不是很实用。例如，.prop('checked') 在以下代码中似乎不起作用。

  $('#input-checkbox').click(function () {
    if ($("#input-checkbox").prop('checked')) {
      alert("yes");
    } else {
      alert("no");
    }
  });

<head>
  <script src="https://code.jquery.com/jquery.min.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
  <div class="btn-group" data-toggle="buttons-checkbox">
    <button type="button" class="btn btn-default active" id="input-checkbox">INPUT</button>
  </div>
</body>

有人知道那里出了什么问题吗？

【问题讨论】：

标签： javascript twitter-bootstrap checkbox

【解决方案1】：

将value 属性添加到您的按钮。我把btn-default改成了btn-primary，并在侧面加了一个普通按钮来说明区别。

$('#input-checkbox').click(function () {
    if ($("#input-checkbox").attr('value')=="checked"){
      $("#input-checkbox").attr('value','notchecked');
      $("#input-checkbox").removeClass('active');
    } 
    else {
      $("#input-checkbox").attr('value','checked');
      $("#input-checkbox").addClass('active');
    }
  });

.btn:focus,.btn:active {
   outline: none !important;
}

<head>
  <script src="https://code.jquery.com/jquery.min.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
  <div class="btn-group" data-toggle="buttons-checkbox">
    <button type="button" class="btn btn-primary active" value="checked" id="input-checkbox">INPUT</button>
    <button type="button" class="btn btn-primary"> NPUT</button>
  </div>
</body>

【讨论】：

它确实有效......但我很惊讶我们必须为“复选框”添加一个自定义属性“值”。
好吧，我们也可以通过其他方法使其工作。但是当我们需要在其他功能或事件发生时保持状态时，切换类并不好。那你能接受答案吗？
接受答案没问题。此外，$("#input-checkbox").removeClass('active'); 和 $("#input-checkbox").addClass('active'); 似乎不是必需的。
我意识到$(this).hasClass('active')可能是一个检查，而不是添加一个自定义属性value。