哪个更适合CSS状态：checkbox或javascript？

使用隐藏复选框创建具有状态的样式 - 例如，当动画下拉，自定义复选框等时 - 是一种非常流行的技术。使用JavaScript来做同样的事也很容易。哪个更适合CSS状态：checkbox或javascript？

这两种策略都有什么缺点吗？我在任何一个策略寻找性能差异，呈现/重绘/回流，兼容性，代码规范，SEO等

function toggle() { 
 
    var cb = document.getElementById('checkbox-js'); 
 
    if (cb.className === 'checkbox') { 
 
    cb.className = "checkbox checked"; 
 
    } else { 
 
    cb.className = "checkbox"; 
 
    } 
 
}

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

 
.checkbox { 
 
    display: inline-block; 
 
    font-size: 20px; 
 
    border: 1px solid #AAA; 
 
    width: 32px; 
 
    height: 32px; 
 
    line-height: 32px; 
 
    vertical-align: middle; 
 
} 
 

 
.checkbox:before { 
 
    width: 32px; 
 
    height: 32px; 
 
    content: "x"; 
 
    color: white; 
 
    text-align: center; 
 
    display: inline-block; 
 
} 
 

 
input[type="checkbox"]:checked + .checkbox:before { 
 
    color: #333; 
 
} 
 

 
.checkbox.checked:before { 
 
    color: #333; 
 
}

<div class="css-only"> 
 
    <label> 
 
    CSS Only: 
 
    <input placeholder="Name" type="checkbox" /> 
 
    <span class="checkbox"></span> 
 
    </label> 
 
</div> 
 
<br> 
 
<br> 
 
<br> 
 
<div class="with-js"> 
 
    <label> 
 
    With JS: 
 
    <span onClick="toggle()" class="checkbox" id="checkbox-js"></span> 
 
    </label> 
 
</div>

来源

2015-05-04 ecc

是否有任何回退

当然有。

复选框是：<input type='checkbox' />

输入被提交回服务器。

所以你可以阅读它们的值。这是HTML的工作原理。

使用span没有提供这种方式。

来源

2015-05-04 13:55:41

是的，我想如果我想要的只是一个复选框，这是一个有效的点。我后悔在我的例子中使用复选框：P – ecc

我把这个问题解释为：你应该把你的状态保持在DOM还是JavaScript中？

这两种解决方案都可以工作，但更好的是与复杂性有关。如果你正在做的是切换复选框的状态，我会说任何一种方法都可以。请记住，任何与DOM的交互都很慢，但在复选框上重新绘制一个或两个图形不会是个问题。

如果您的模型和逻辑变得更加复杂，那么保持JavaScript中的状态可能是更好的方法。例如：你有一个复选框列表，你只能检查4.

来源

2015-05-04 14:02:45 Halcyon

我只想控制二进制动画，如复选框，切换，下拉菜单和手风琴。 DOM可能或多或少复杂，但对我来说，逻辑总是很简单。 – ecc

哪个更适合CSS状态：checkbox或javascript？

回答

相关问题