javascript - 在表格中切换各个切换开关
问题描述
我有唯一的 id,用于在表行中动态构建切换,我让 css 使用 [attr*="checkbox"]; 但是,无论哪种切换,我都只单击顶部的切换。我现在有 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;
}
解决方案
在不知道您的模型中的数据的情况下,我能够使用您的代码制作一个临时表。.css
我将代码中的选择器从 更改[id^="checkbox"]
为"input:checkbox[id^='checkbox']"
。这将选中您的 id 开头的复选框,checkbox
因为它们似乎都将。这似乎也选择了每个单独的复选框。希望这对您来说是朝着正确方向的推动。
工作 jsfiddle:https ://jsfiddle.net/2kz1e5fd/
推荐阅读
- ios - 无法识别的选择器发送到类运行时错误
- r - 如何将等高线添加到平铺图
- c# - 需要从视图数据中选择最后一个 ID
- c# - 解析值时遇到意外字符:T. Path '', line 0, position 0. 不更新数据库中的实体
- mysql - 如何根据其他两列的不同组合检查第三列中的匹配值?
- java - Java泛型在类字段和序列化上的变化
- java - Selenium with java - 需要点击一个按钮
- ?
- excel-formula - 需要 2 列的公式 (B & F) 整列需要公式
- mysql - Mysql 应用程序日志记录。通过删除旧日志来限制记录的行数
- android - “ANativeWindow_fromSurface”的对面