通过单击按钮更改复选框颜色以一次从上到下淡出一个

Question

如何为这些 选中 复选框在它们的单击按钮后透视检查顺序而不是一次全部检查？

我的 CSS 过渡不起作用。

这是我的代码示例。我希望我能够很好地解释它。

$("button").click(function() {
  $("table").toggleClass("alternative");
});

table.example1, table.example1 th, table.example1 td {
    border: 3px solid grey;
    max-width: 200px;
}

input[type=checkbox] {
    display:none;
}

input[type=checkbox] + label {
    display:inline-block;
    padding: 6px 60px;
    margin-bottom: 0;
    font-size: 14px;
    line-height: 20px;
    color: white;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    background-color: transparent;
    background-repeat: repeat-x;
}

input[type=checkbox]:checked + label{
    background-color: #3e618b;
    outline: 0;
}
.alternative input[type=checkbox]:checked + label{
    -moz-transition: height .10s ease-in;
    -o-transition: height .10s ease-in;
    -webkit-transition: height .10s ease-in;
    transition: height .10s ease-in;
    background-color: #5093e4;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="example1" style="width:40%;" align='center'>
<tr>
    <td>
        <input type="checkbox" id="chk1" name="chk" value="1">
          <label for="chk1">&nbsp; 1</label>
    </td>
    <td>
        <input type="checkbox" id="chk2" name="chk"value="2">
        <label for="chk2">&nbsp; 2</label>
    </td>
</tr>

    <tr>
        <td>
            <input type="checkbox" id="chk3" name="chk" value="3">
              <label for="chk3">&nbsp; 3</label>
        </td>
        <td>
            <input type="checkbox" id="chk4"name="chk" value="4">
            <label for="chk4">&nbsp; 4</label>
        </td>
    </tr>

    <tr>
        <td>
            <input type="checkbox" id="chk5"name="chk"value="5">
            <label for="chk5">&nbsp; 5</label>
        </td>
        <td>
            <input type="checkbox" id="chk6"name="chk"value="6">
            <label for="chk6">&nbsp; 6</label>
        </td>
    </tr>

    <tr>
        <td>
            <input type="checkbox" id="chk7"name="chk"value="7">
            <label for="chk7">&nbsp; 7</label>
        </td>
        <td>
            <input type="checkbox" id="chk8"name="chk"value="8">
            <label for="chk8">&nbsp; 8</label>
        </td>
    </tr>
</table>   

<button>Changes checked checkbox color</button>

Answer 1

不确定这是否是您要查找的内容，但由于您只是在修改 background-color 属性，因此您希望您的过渡监控它（而不是高度）。此外，将它放在未选中的输入上可以在它从该样式转换为选中的样式时发生。

$("button").click(function() {
  $("table").toggleClass("alternative");
});

table.example1, table.example1 th, table.example1 td {
    border: 3px solid grey;
    max-width: 200px;
}

input[type=checkbox] {
    display:none;
}

input[type=checkbox] + label {
    display:inline-block;
    padding: 6px 60px;
    margin-bottom: 0;
    font-size: 14px;
    line-height: 20px;
    color: white;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    background-color: transparent;
    background-repeat: repeat-x;
    transition: background-color 2s ease-in;
}

input[type=checkbox]:checked + label{
    background-color: #3e618b;
    outline: 0;
}
.alternative input[type=checkbox]:checked + label{
    -moz-transition: background-color .10s ease-in;
    -o-transition: background-color .10s ease-in;
    -webkit-transition: background-color .10s ease-in;
    transition: background-color 2s ease-in;
    background-color: #5093e4;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="example1" style="width:40%;" align='center'>
<tr>
    <td>
        <input type="checkbox" id="chk1" name="chk" value="1">
          <label for="chk1">&nbsp; 1</label>
    </td>
    <td>
        <input type="checkbox" id="chk2" name="chk"value="2">
        <label for="chk2">&nbsp; 2</label>
    </td>
</tr>

    <tr>
        <td>
            <input type="checkbox" id="chk3" name="chk" value="3">
              <label for="chk3">&nbsp; 3</label>
        </td>
        <td>
            <input type="checkbox" id="chk4"name="chk" value="4">
            <label for="chk4">&nbsp; 4</label>
        </td>
    </tr>

    <tr>
        <td>
            <input type="checkbox" id="chk5"name="chk"value="5">
            <label for="chk5">&nbsp; 5</label>
        </td>
        <td>
            <input type="checkbox" id="chk6"name="chk"value="6">
            <label for="chk6">&nbsp; 6</label>
        </td>
    </tr>

    <tr>
        <td>
            <input type="checkbox" id="chk7"name="chk"value="7">
            <label for="chk7">&nbsp; 7</label>
        </td>
        <td>
            <input type="checkbox" id="chk8"name="chk"value="8">
            <label for="chk8">&nbsp; 8</label>
        </td>
    </tr>
</table>   

<button>Changes checked checkbox color</button>

Answer 2

查看下面的代码。

$("button").click(function() {
  $(".overlay").css('top', '0px');
});

table.example1, table.example1 th, table.example1 td {
    border: 3px solid grey;
    max-width: 200px;
}

td {
  overflow: hidden;
  position: relative;
}

.overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #3e618b;
  top: -60px;
  left: 0;
  z-index: 0;
  transition:top 1s linear;
}

input[type=checkbox] {
    display:none;
}

input[type=checkbox] + label {
    margin-bottom: 0;
    font-size: 14px;
    line-height: 20px;
    color: white;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    background-repeat: repeat-x;
    transition: top 1s linear;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
}

input[type=checkbox]:checked ~ .overlay{
    top: 0;
}
.alternative input[type=checkbox]:checked + label{
    -moz-transition: height .10s ease-in;
    -o-transition: height .10s ease-in;
    -webkit-transition: height .10s ease-in;
    transition: height 1s ease-in;
    background-color: #5093e4;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="example1" style="width:40%;" align='center'>
<tr>
    <td>
        <input type="checkbox" id="chk1" name="chk" value="1">
        <label for="chk1">&nbsp; 1</label>
        <div class="overlay"></div>
    </td>
    <td>
        <input type="checkbox" id="chk2" name="chk"value="2">
        <label for="chk2">&nbsp; 2</label>
        <div class="overlay"></div>
    </td>
</tr>

    <tr>
        <td>
            <input type="checkbox" id="chk3" name="chk" value="3">
              <label for="chk3">&nbsp; 3</label>
                      <div class="overlay"></div>
        </td>
        <td>
            <input type="checkbox" id="chk4"name="chk" value="4">
            <label for="chk4">&nbsp; 4</label>
                    <div class="overlay"></div>
        </td>
    </tr>

    <tr>
        <td>
            <input type="checkbox" id="chk5"name="chk"value="5">
            <label for="chk5">&nbsp; 5</label>
                    <div class="overlay"></div>
        </td>
        <td>
            <input type="checkbox" id="chk6"name="chk"value="6">
            <label for="chk6">&nbsp; 6</label>
                    <div class="overlay"></div>
        </td>
    </tr>

    <tr>
        <td>
            <input type="checkbox" id="chk7"name="chk"value="7">
            <label for="chk7">&nbsp; 7</label>
                    <div class="overlay"></div>
        </td>
        <td>
            <input type="checkbox" id="chk8"name="chk"value="8">
            <label for="chk8">&nbsp; 8</label>
                    <div class="overlay"></div>
        </td>
    </tr>
</table>   

<button>Changes checked checkbox color</button>