Как сделать чекбокс с фоновым изображением?

Question

[FQXs]

Сделал чтобы при клике устанавливалось нужное мне изображение, как сделать чтобы при следующем клике снова ставился снова фон, без изображения? Какое условие написать?

Исправил, теперь 1 раз ставит фоновое изображение и 1 раз убирает, далее перестает откликаться:

function real_checkbox1(){
    var box = document.getElementById("real_checkbox");
    var bg = '';
    var bg = document.getElementById('real_checkbox').style.backgroundImage.length!=0;
    box.style.cursor = 'pointer';
    if(bg){
        box.style.background ="#FAFAFA";
    }else{
        box.style.background = "url('./img/checkbox_click.png') center";
        
    }
}

Comments

[I'm Yoda]

coderxx, зачем так грубо?

[ksnk]

Вообще-то есть классы. При клике на элемент ему нужно поставить или убрать класс. А вот бякграунд пусть убирает css, в котором при наличии класса все что надо будет прописано. Так проще и для программирования и для дальнейшей модификации.
А ошибка этого скрипта в том, что backgroundImage не станет пустой строкой, а станет 'none'.

Answer 1

[Ragtime Kitty]

У чекбокса есть два положения: отмечен и не отмечен.
Чтобы сделать разные стили для них, вам даже js не нужен, используйте псевдо-класс :checked.

Ну а если вот прям нужно через скрипты, то проверяйте свойство element.checked, а не стили.

Ну а если по каким-то причинам это не чекбокс, а замаскированный под него блок, то просто переключайте класс через element.classList.toggle();