Question

我需要一个类似按钮的控件，它具有一个checked属性，因此在单击时它会保持按下状态。类似于下面示例图片中的“清除响应”按钮。

我怎样才能在CSS中执行此操作？我是CSS新手。有人可以提供一个例子或指向一个类似于这个的例子吗？

PS：我知道我需要使用Javascript来更新保存按钮状态的布尔变量，并动态地将样式应用于按钮。我的问题更像是如何创建一个包含复选框的按钮，因为我只有一张背景图片。

http://i.stack.imgur.com/vBV6F.png

Answer 1

对于CSS，您可以执行以下操作：

<style type='text/css'>
    /* this is the style of an unchecked "button" */
    .input-check{
        display:inline-block;
        height:20px;
        padding:5px 8px;
        background:green;
        width:70px;
        color:white
    }
    /* This is the style for a checked "button" */
    .input-check.checked{
        background:red;
        color:black;
        font-weight:bold
    }
    /* Hide the checkbox */
    .input-check input{
        display:none
    }
</style>

接下来是HTML。要减少JavaScript编码，最好在标签内嵌套一个复选框。这将使您在单击标签时自动处理复选框的选中/取消选中。

<label class="input-check"><input onchange="change_state(this)" type="checkbox" value="something" name="test"/> click me </label>

最后是JavaScript：

<script type="text/javascript">
    /* If you have more experience in JavaScript, I recommend not binding the change event this way, I didn't bother much about this part, since I guess it isn't part of the question */
    function change_state(obj){
        if (obj.checked){
            //if checkbox is being checked, add a "checked" class
            obj.parentNode.classList.add("checked");
        }
        else{
            //else remove it
            obj.parentNode.classList.remove("checked");
        }
    }
</script>

这是jsFiddle供您测试。

Answer 2

如果我理解你想要什么，那就不需要CSS了

<button><input type="checkbox" /> Purge</button>

然后你可能需要javascript检查并在点击按钮时取消选中该框，但以上是基本想法。

这里有一些快速的js

<html>
<head>
<script type="text/javascript">
function check() {
    var c = document.getElementById('check') ;

    c.checked = (c.checked) ? false : true ;
}
</script>
</head>
<body>
    <button onclick="check()"><input type="checkbox" id="check" /> Purge</button>
</body>
</html>

Answer 3

请参阅标题为here标题的复选框按钮部分。如果我正确地理解了您的问题，那么这似乎就是您所做的事情，也许稍作修改。

Answer 4

为什么不设一个复选框来看起来像一个按钮？

然后您可以使用:checked CSS psudeo选择器按照您想要的方式设置样式，而无需通过javascript添加类。

以下是CodePen中的一个精心设计的示例：http://codepen.io/arjabbar/pen/csafj

CSS双状态按钮

4 个答案: