勾选以在按钮上显示按钮并在单击时降低其不透明度

Question

我希望在单击按钮后显示一个刻度并降低其不透明度。

#btnTicketType{
    margin-bottom:2%;
    margin-top:10%;
    width:95%;
    height:15em;
    font-size:1.5em;
}

#seatnumber{
    display:block; 
    width:100%; 
    text-align:center;
    font-size:1em;
}

#rectangle{
    height:100%;
    width:100%;
    overflow:auto;
    outline-color:black;
    outline-style:solid;
}

<div id="rectangle">
        <div class="col-md-3">
            <button id="btnTicketType" class="btn btn-default">Button 1</button>
            <small id="seatnumber">Text 1</small>
        </div>
                <div class="col-md-3">
            <button id="btnTicketType" class="btn btn-default">Button 2</button>
            <small id="seatnumber">Text 2</small>
        </div>
                <div class="col-md-3">
            <button id="btnTicketType" class="btn btn-default">Button 3</button>
            <small id="seatnumber">Text 3</small>
        </div>
}
</div>
<br />

如果勾号显示后还可以降低按钮的不透明度，这样对用户来说勾号会更加突出。

Answer 1

我创建了一个 HTML/CSS/JavaScript sn-p，它执行以下操作：

1. 在每个按钮上都包含一个“勾号”；和
2. 单击按钮后，它会淡出

您可以在 JSFiddle 上查看一个工作示例。

您的问题有点令人困惑，因为问题的标题和正文说的不同：

在按钮上显示勾选并在点击时降低不透明度

对比：

我希望在单击按钮后在按钮上显示一个勾号。

可以轻松修改此 sn-p 的 CSS 以获得任一结果。

工作片段

$( '.btnTicketType' ).click(function() {
  $(this).addClass('clicked-button');
});

.btnTicketType {
    margin-bottom: 2%;
    margin-top: 10%;
    width: 95%;
    height: 15em;
    font-size: 1.5em;
    transition: all 1s;
}

.seatnumber{
    display: block; 
    text-align: center;
    font-size: 1em;
}

#rectangle{
    overflow: auto;
    outline-color: black;
    outline-style: solid;
}

.clicked-button {
    opacity: .1;
}

<link href="https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="rectangle">
    <div class="col-md-3">
        <button class="btnTicketType btn btn-default" value="">
            <i class="fa fa-check" aria-hidden="true"></i>
            Button 1
        </button>
        <small class="seatnumber">Text 1</small>
    </div>
    <div class="col-md-3">
        <button class="btnTicketType btn btn-default" value="">
            <i class="fa fa-check" aria-hidden="true"></i>
            Button 2
        </button>
        <small class="seatnumber">Text 2</small>
    </div>
    <div class="col-md-3">
        <button class="btnTicketType btn btn-default" value="">
            <i class="fa fa-check" aria-hidden="true"></i>
            Button 3
        </button>
        <small class="seatnumber">Text 3</small>
    </div>
</div>

附加说明

1. <button> 元素是semantically valid：

   HTML <button> 元素代表一个可点击的按钮。

2. 如果需要，<button> 元素 can contain other HTML elements：

   <button> 元素比<input> 元素更容易设置样式。您可以添加内部 HTML 内容（例如 <em>、<strong> 甚至 <img>），并利用 :after 和 :before 伪元素实现复杂的渲染，而 <input> 只接受文本值属性.

3. 根据上述定义，我使用Font Awesome 将check icon 添加到您的按钮中。

4. 您的 HTML 错误地重用了 ID 属性。 id="btnTicketType" 属性必须是唯一的，并且不能在有效的 HTML 中重复使用。如果您需要设置多个元素的样式，最好使用class="btnTicketType"。我用类替换了重复的 ID 属性，而不是我的 sn-p 中的 HTML。

5. 如果您在<form> 中使用<button> 元素，则value="" 属性将与表单一起提交。来自MDN documentation：

value
按钮的初始值。它定义了与表单数据一起提交的按钮相关联的值。该值在表单提交时以 params 的形式传递给服务器。