JavaScript - как изменить фон флажка?

#javascript #html #checkbox

#javascript #HTML #флажок

Вопрос:

Я хочу изменить фон флажка без использования jQuery (если это возможно, конечно), потому что я не знаком с этой библиотекой.

HTML:

     <form name="checkBox">
        <input onchange="checkbox()" type="checkbox" class="cbox" />
    </form>

JS:

 function checkbox(){
    var checkbox = document.getElementByClass('cbox');
    if(document.getElementById('cbox').checked === true){
        checkbox.style.background = "url('uncheck.png')";
    }else{
        checkbox.style.background = "url('check.png')";
    }
}

1. Вы указали class и продолжаете прослушивание id — Измените class='cbox' на id='cbox'

2. Он по-прежнему недействителен — document.getElementByClass Он должен быть document.getElementsByClassName

3. Я не думаю, что вы можете установить background-image для флажка. Однако вы можете сообщить о состоянии флажка через его метку. Смотрите мое решение, которое использует только CSS. И вот скрипта, которая показывает, что фоновое изображение для флажка не устанавливается: jsfiddle.net/g7dM2 .

Ответ №1:

Вы смешиваете имена классов и идентификаторы. Попробуйте это.

HTML:

 <form name="checkBox">
    <input onchange="checkbox()" type="checkbox" id="cbox" />
</form>

JS:

 function checkbox(){
    var checkbox = document.getElementById('cbox');
    if(checkbox.checked === true){
        checkbox.style.background = "url('uncheck.png')";
    }else{
        checkbox.style.background = "url('check.png')";
    }
}

Ответ №2:

Как насчет чистого CSS-решения без необходимости использования изображений:http://jsfiddle.net/7qcE9/1 /.

HTML:

 <form name="checkBox">
    <input type="checkbox" id = "checkbox1" />
    <label for = "checkbox1"></label>
</form>

CSS:

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

form > label {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 1px solid #000;
    border-radius: 3px;
    font-size: 20px;
    text-align: center;
    cursor: pointer;
}

form > input[type = "checkbox"]:checked   label:before {
    content:'2714';
}

Ответ №3:

Вы можете передать ссылку на флажок с помощью this встроенного обработчика следующим образом:

HTML

 <form name="checkBox">
    <input onchange="checkbox(this)" type="checkbox" class="cbox" />
</form>

 function checkbox(elm){ // elm now refers to the checkbox
 if(elm.checked === true){
    elm.style.background = "url('uncheck.png')";
 }else{
    elm.style.background = "url('check.png')";
 }
}

Чтобы вы могли использовать функцию для n количества элементов.

1. Я пробую этот, и у флажка все еще есть фон по умолчанию, все по-прежнему одинаковое. Может быть, что-то другое?

2. @Wiruspwns ну, код работает нормально , может быть, дело в чем-то другом ..? пожалуйста, предоставьте демонстрацию с изображениями, где это не работает.