Question

我有一个带有一些CSS代码的复选框，使其看起来像Android复选框。

css的样式是在属性时应用更改。

.material-switch > input[type="checkbox"]:checked + label::before {
    background: inherit;
    opacity: 0.5;
}
.material-switch > input[type="checkbox"]:checked + label::after {
    background: inherit;
    left: 20px;
}

当页面加载时，我这样做

$(function() {

    var autoPopulateForm = {{ $settings['company_send_input_form_prompt'] }};
    document.getElementById('autoPopulateForm').checked = true;

这会更改属性的状态，但CSS图形不会反映更改。

我如何解决这个问题，是否可以刷新完成相同目的的项目或事情？

Answer 1

这就像一个魅力！我唯一猜到的就是你每次都没有检查条件。看看我为了获得UI可以轻松切换的整个想法而做的小提琴。

HTML

<div class="material-switch">
  <input type="checkbox" id="autoPopulateForm">
  <label for="autoPopulateForm">Label</label>
</div>

JAVASCRIPT

var autoPopulateForm;
toggle();
function toggle() {
    setInterval(function() {
        if (autoPopulateForm == 1) {
            console.log('a');
            autoPopulateForm = 0;
        }
        else {
            console.log('b');
            autoPopulateForm = 1;
        }
        if (autoPopulateForm == 1) {
            document.getElementById('autoPopulateForm').checked = true;
        } else {
            document.getElementById('autoPopulateForm').checked = false;
        }
    }, 400);
}

CSS

.material-switch > input[type="checkbox"]:checked + label::before {
  background: inherit;
  opacity: 0.5;
    conetnt: "";
    width: 100px;
    height: 100px;
    background-color: red;
}

.material-switch > input[type="checkbox"]:checked + label::after {
  background: inherit;
  left: 20px;
    conetnt: "";
    width: 100px;
    height: 100px;
    background-color: teal;
}

刷新适用于元素属性的css

1 个答案:

Working Fiddle