Javascript 选中按钮状态复选框

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

当我使用引导时，自然会想到使用

data toggle=“buttons checkbox”

。但是，验证复选框的状态似乎不太实际。例如，

.prop（'checked'）

在以下代码中似乎不起作用

$（'#输入复选框'）。单击（函数（）{
if（$（“#输入复选框”）.prop（'checked'））{
警惕（“是”）；
}否则{
警告（“否”）；
}
});

输入
将
值
属性添加到按钮。我将
btn default
更改为
btn primary
，并在侧面添加了一个普通按钮来说明差异


$（'#输入复选框'）。单击（函数（）{
if（$（“#输入复选框”）.attr（'value'）==“选中”）{
$（“#输入复选框”）.attr（'value'，'notchecked'）；
$（“#输入复选框”）.removeClass（'active'）；
} 
否则{
$（“#输入复选框”）.attr（'value'，'checked'）；
$（“#输入复选框”）.addClass（“活动”）；
}
});
.btn:focus，.btn:active{
大纲：无！重要；
}

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