javascript - 切换表格中的各个切换开关

Question

我有唯一的 id，用于在表行中动态构建的切换，我使用 [attr*="checkbox"]; 得到了 css 适本地抓取它们；但是，无论是哪个切换按钮，我都只单击最上面的一个切换按钮。我现在有 0 个 JS，我不知道从哪里开始让各个 JS 切换，因为它们是动态生成的。我找到了如何将属性设置为 true 和 false。但是我在网上找到的所有内容都不是直截了当的。

 <table class="table table-hover table-md ">

    <thead>
       <tr>
        <td class="text-left tableHead">RoleId</td>
        <td class="text-left tableHead">Role</td>
        <td class="text-right tableHead">Delete</td>
          </tr>
    </thead>
           @*--Table Body For Each to pull DB records--*@
              <tbody>
                @{int i = 0;}
                @foreach (var role in Model.Roles)
                 {                                   
                  <tr>                                
                    <td>@role.RoleID</td>
                    <td>@role.RoleName</td>
                    <td>
                    <input type="checkbox" name="checkbox" id="checkbox@(i)" class="ios-toggle"/>
                    <label for="checkbox@(i)" class="checkbox-label float-right"></label>
                    </td>

                  </tr>                                       
                  i++;
                 }
               </tbody>
 </table>

CSS:

.ios-toggle, .ios-toggle:active {
    position: absolute;
    top: -5000px;
    height: 0;
    width: 0;
    opacity: 0;
    border: none;
    outline: none;
}

.checkbox-label {
    display: block;
    position: relative;
    /* padding: 10px; */
    margin-bottom: 20px;
    font-size: 12px;
    line-height: 16px;
    width: 35%;
    height: 25px;
    -webkit-border-radius: 18px;
    -moz-border-radius: 18px;
    border-radius: 18px;
    background: #f8f8f8;
    cursor: pointer;
}

    .checkbox-label:before {
        content: '';
        display: block;
        position: sticky;
        z-index: 1;
        line-height: 34px;
        text-indent: 40px;
        height: 25px;
        width: 25px;
        -webkit-border-radius: 100%;
        -moz-border-radius: 100%;
        border-radius: 100%;
        top: 0px;
        left: 0px;
        /* right: auto; */
        background: white;
        -webkit-box-shadow: 0 3px 3px rgba(0,0,0,.2), 0 0 0 2px #dddddd;
        -moz-box-shadow: 0 3px 3px rgba(0,0,0,.2),0 0 0 2px #dddddd;
        box-shadow: 0 3px 3px rgba(0,0,0,.2), 0 0 0 2px #dddddd;
    }

    .checkbox-label:after {
        content: attr(data-off);
        display: block;
        position: absolute;
        z-index: 0;
        top: 0;
        left: -300px;
        padding: 10px;
        height: 100%;
        width: 300px;
        text-align: right;
        color: #bfbfbf;
        white-space: nowrap;
    }

.ios-toggle:checked + .checkbox-label {
    /*box-shadow*/
    -webkit-box-shadow: inset 0 0 0 20px rgba(19,191,17,1),0 0 0 2px rgba(19,191,17,1);
    -moz-box-shadow: inset 0 0 0 20px rgba(19,191,17,1),0 0 0 2px rgba(19,191,17,1);
    box-shadow: inset 0 0 0 20px rgba(19,191,17,1),0 0 0 2px rgba(19,191,17,1);
}

    .ios-toggle:checked + .checkbox-label:before {
        left: calc(100% - 36px);
        /*box-shadow*/
        -webkit-box-shadow: 0 0 0 2px transparent,0 3px 3px rgba(0,0,0,.3);
        -moz-box-shadow: 0 0 0 2px transparent,0 3px 3px rgba(0,0,0,.3);
        box-shadow: 0 0 0 2px transparent,0 3px 3px rgba(0,0,0,.3);
    }

/* GREEN CHECKBOX */

[id*="checkbox"] + .checkbox-label {
    /*box-shadow*/
    -webkit-box-shadow: inset 0 0 0 0px rgba(19,191,17,1),0 0 0 2px #dddddd;
    -moz-box-shadow: inset 0 0 0 0px rgba(19,191,17,1),0 0 0 2px #dddddd;
    box-shadow: inset 0 0 0 0px rgba(19,191,17,1),0 0 0 2px #dddddd;
}

[id*="checkbox"]:checked + .checkbox-label {
    /*box-shadow*/
    -webkit-box-shadow: inset 0 0 0 18px rgba(0, 154, 68, 1),0 0 0 2px rgba(0, 154, 68, 1);
    -moz-box-shadow: inset 0 0 0 18px rgba(0, 154, 68, 1),0 0 0 2px rgba(0, 154, 68, 1);
    box-shadow: inset 0 0 0 18px rgba(0, 154, 68, 1),0 0 0 2px rgba(0, 154, 68, 1);
}

    [id*="checkbox"]:checked + .checkbox-label:after {
        color: #009A44 !important;
    }

Answer 1

由于不知道您模型中的数据，我能够使用您的代码制作一个临时表格。我将 .css 代码中的选择器从 [id^="checkbox"] 更改为 "input:checkbox[id^='checkbox']"。这将选中您的复选框，它们的 ID 以 checkbox 开头，因为看起来它们都会。这似乎也选中了每个单独的复选框。希望这对您来说是朝着正确方向的插入。

工作 jsfiddle:https://jsfiddle.net/2kz1e5fd/