Question

我已经搜索了一段时间，并尝试了一些不同的方法-但就我的生命而言，似乎无法正常工作。

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

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

codepen.io/anon/pen/JzYOpZ

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

Answer 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">

Answer 2

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

HTML更改：

case FETCH_NEW_POSTS
    let posts = [...state.posts];
    posts.push(action.payload.posts);
    return {
        ...state, 
        posts
    };

JavaScript函数：

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

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

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

Answer 3

好，所以答案实际上非常简单

您需要确保使用的是“数据目标”，而不是使用href属性来定位要折叠的div

我已经更新了问题中的代码笔以反映这一点。

自定义复选框状态在引导崩溃时不会更新

3 个答案:

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