自定义复选框状态未在引导折叠时更新答案

【问题标题】：Custom checkbox state not updating on bootstrap collapse自定义复选框状态未在引导折叠时更新
【发布时间】：2019-02-28 12:16:11
【问题描述】：

我已经搜索了一段时间并尝试了一些不同的东西 - 但我这辈子似乎无法让它发挥作用。

在下面的代码笔中是一个自定义复选框的示例，其中一个 div 在选中复选框时切换为显示/隐藏，还有一个普通复选框，其中折叠功能和复选框按预期工作

我一生都无法理解为什么自定义复选框在选中时不会改变状态 - 如果我删除数据切换，自定义复选框可以工作，但是一旦引入数据切换，它就会失败。

codepen.io/anon/pen/JzYOpZ

如果不清楚 - 我希望复选框状态在单击时在选中/未选中之间切换并显示可折叠 div。

【问题讨论】：

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

您必须使用不同的类更改 svg 的 fill 属性这是更新的笔 https://codepen.io/anon/pen/pYjppK

我更改的 css 如下

.cbx span:first-child svg {
    position: absolute;
    top: 3px;
    left: 2px;
    stroke: #FFFFFF;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 16px;
    stroke-dashoffset: 16px;
    transition: all 0.3s ease;
    transition-delay: 0.1s;
    transform: translate3d(0, 0, 0);
}
.cbx span:first-child svg {
  fill: blue;
}

.cbx.collapsed span:first-child svg {
  fill: none;
}

当最初加载复选框时，我将折叠的类添加到复选框中，如下所示

<label class="cbx collapsed" for="test" data-toggle="collapse" href="#collapseOne">

【讨论】：

谢谢，但它看起来并没有解决复选框不改变状态的根本问题，如果你选择 display:none;关闭输入框，您会看到它没有改变。
我认为问题出在带有自定义复选框的 UI 上
没问题！已更新问题以使其更清楚，但谢谢:)

【解决方案2】：

除非您主动避免使用 JavaScript，否则一个简单的解决方案是实现一个函数来更改状态：

HTML 更改：

<div class="checkbox" onclick="checkIt()">

JavaScript 函数：

function checkIt()
{
  if (document.getElementById("test").checked == false)
    {
      document.getElementById("test").checked = true;
    }
  else
    {
      document.getElementById("test").checked = false;
    } 
}

编辑：如果您选择此答案，请不要忘记链接脚本文件：

<script type="text/javascript" src="yourScript.js"></script>

【讨论】：

Javascript 解决方案很好，但如果内容是动态生成的，并且在呈现页面之前我不知道 ID - 我将如何修改上述函数以仅获取此 ID？顺便谢谢你的回答！
您可以将 ID 作为函数的参数传递，即 checkIt(ID)，然后在脚本中将“test”替换为 ID。这样，当您调用该函数时，您可以传递生成的 ID。
@lamps92 如果您找到解决方案，请告诉我。
不确定它会起作用，因为我点击了标签（带有 ID 的输入设置为 display:none; 以使自定义复选框样式起作用） - 所以点击事件不会传递任何 ID，除非我误会了？我可能是 JS 新手 :D
嘿杰克！我终于解决了，答案在下面，但感谢您的帮助

【解决方案3】：

好的，所以这个问题的答案实际上非常简单

不要使用 href 属性来定位你想要折叠的 div，你需要确保你使用的是“data-target”

我已更新问题中的 codepen 以反映这一点。

【讨论】：