将 CheckBoxes 变成 CheckButtons答案

【问题标题】：Turn CheckBoxes into CheckButtons将 CheckBoxes 变成 CheckButtons
【发布时间】：2018-12-19 20:51:07
【问题描述】：

我正在尝试打开这些复选框：

进入这些复选框（我将它们称为CheckButtons）：

下面是当前Check Boxes的代码：

        @foreach (var department in Model.Select(u => new { u.DepartmentId, u.DepartmentName }).Distinct().ToDictionary(u => u.DepartmentId, u => u.DepartmentName).OrderBy(u => u.Value))
    {
        i++;
        <text> &nbsp; &nbsp;</text>
@department.Value <input name="department_chkbox" type="checkbox" value="@department.Key" />
        if (i > 5)
        {
            <text><br></text>
            i = 0;
        }
    }

所需的 HTML 在下面，但它并没有告诉我太多：

<td id="checkboxcontainer">
     <input type="checkbox" name="statusId" value="1" id="ckActive" checked="checked" /><label for="ckActive">Active</label>
     <input type="checkbox" name="statusId" value="2" id="ckLeave" /><label for="ckLeave">Leave</label>
     <input type="checkbox" name="statusId" value="3" id="ckSusp" /><label for="ckSusp">Suspended</label>
     <input type="checkbox" name="statusId" value="4" id="ckTerm" /><label for="ckTerm">Terminated</label>
</td>

有谁知道要调用什么来使复选框变成“检查按钮”我编写了 复选框 代码，但我无法访问 检查按钮代码。我假设这是在 eitehr Javascript 或 Jquery 中完成的。

也没有类

【问题讨论】：

如果不能在浏览器开发工具中检查它们，就无法知道。这一切都可能只用 css 完成。给你创建的一些<label>'s
CSS 样式标签。

标签： javascript jquery html css checkbox

【解决方案1】：

脱离所需的 HTML，它是仅使用 CSS 的相对简单的解决方案。当然，您需要对其进行调整以使其看起来完全符合您的要求。

#checkboxcontainer {
  display: flex;
}

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

input[type=checkbox] + label {
  display: block;
  min-width: 100px;
  border: solid #999;
  border-width: 1px 1px 1px 0;
  background: #eee;
  margin: 0;
  padding: 2px 0;
  text-align: center;
}

input[type=checkbox]:checked + label {
  background: #ccc;
}

input[type=checkbox] + label:first-of-type {
  border-radius: 3px 0 0 3px;
  border-left-width: 1px;
}
input[type=checkbox] + label:last-of-type {
  border-radius: 0 3px 3px 0;
}

<div id="checkboxcontainer">
  <input type="checkbox" name="statusId" value="1" id="ckActive" checked="checked" /><label for="ckActive">Active</label>
  <input type="checkbox" name="statusId" value="2" id="ckLeave" /><label for="ckLeave">Leave</label>
  <input type="checkbox" name="statusId" value="3" id="ckSusp" /><label for="ckSusp">Suspended</label>
  <input type="checkbox" name="statusId" value="4" id="ckTerm" /><label for="ckTerm">Terminated</label>
</div>

要使用 Razor 生成此 HTML，您将拥有如下内容：

<div id="checkboxcontainer">
  @foreach (var department in Model.Select(u => new { u.DepartmentId, u.DepartmentName }).Distinct().ToDictionary(u => u.DepartmentId, u => u.DepartmentName).OrderBy(u => u.Value))
  {
    i++;
    <input name="department_chkbox" type="checkbox" value="@department.Key" id="department_chkbox@(i)" /><label for="department_chkbox@(i)">@department.Value</label>
  }
</div>

【讨论】：