javascript - 如何在需要时突出显示替代隐藏复选框输入的复选框伪元素

Question

我有一个复选框伪元素，它替代了隐藏的复选框输入，我想在需要隐藏的复选框时突出显示它。有什么css 解决方案吗？解决问题的正确方法是什么？ https://jsfiddle.net/ht2c9sbd/3/

<form>
  <div class="group-input">
    <input type="checkbox" id="c_1" required hidden="">
    <label for="c_1">I agree with everything.</label>
  </div>
  <input type="submit" value="submit" id="submit">
</form>

CSS:

input[type="checkbox"] + label::before {
    content: "";
    display: inline-block;
    height: 30px;
    width: 30px;
    margin: 0 14px 0 0;
    cursor: pointer;
    vertical-align: middle;
    position: absolute;
    left: 0;
    top: calc(50% - 15px);
    -webkit-transition: background-color 0.25s ease, border-color 0.25s ease;
    transition: background-color 0.25s ease, border-color 0.25s ease;
}

input[type="checkbox"] + label::before {
    content: "";
    display: inline-block;
    height: 30px;
    width: 30px;
    border: 1px solid rgba(20, 61, 139, 0.2);
    margin: 0 14px 0 0;
    cursor: pointer;
    vertical-align: middle;
    position: relative;
    top: -2px;
}

input[type="checkbox"]:checked + label::before {
    background-image: url(https://image.flaticon.com/icons/png/512/447/447147.png);
    background-size: 15px;
    border: 1px solid rgba(20, 61, 139, 0);
    background-color: rgba(20, 61, 139, 0.2);
    background-position: center;
    background-repeat: no-repeat;
}

这是我糟糕的 js 解决方案:

function checkCheckbox(e) {
    if (!e.checked) {
        $('head').append('<style id="invalidCheckbox">input[type="checkbox"] + label::before {border: 1px solid #ff3535; box-shadow: 0 0 2px #ff3535;}</style>');
        return false;
    } else {
        let temp = $('head style:last');
        while(temp && temp[0].id === "invalidCheckbox"){
            temp.remove();
            temp = $('head style:last');
        }
        return true;
    }
}

const mycheckbox = document.getElementById('c_1');
document.getElementById("submit").addEventListener('click', function(e){
  e.preventDefault();
  checkCheckbox(mycheckbox); 
});

Answer 1

脚本:

const mycheckbox = document.getElementById('c_1');
document.getElementById("submit").addEventListener('click', function(e){
    e.preventDefault();
    if ( mycheckbox.hasAttribute('required') && !mycheckbox.checked ){
    mycheckbox.className = "invalid-input"; // <-- add new class
  } else {
    mycheckbox.className = "";
  }
});

风格(你可以随意改变风格):

input[type="checkbox"].invalid-input + label::before{
  background-color: red;
}

Try to update the existing DOM element instead of creating a new element in DOM because DOM manipulation is slow.

A repaint occurs when changes are made to an elements skin that changes visibly but does not affect its layout.

Create new DOM element is even more critical to performance because it involves changes that affect the layout of a portion of the page