Как сделать кастомный checkbox на JS?

Question

[barhatoff]

Решил сделать чекбокс на JS, потому-что с CSS-ом геморно кастомный чекбокс замутить.
Сделал все это дело через замену значения атрибута img.
Проблема в том что этот скрипт работает, но только при двух нажатиях, то есть, срабатывают операторы if и else по разу и далее не реагируют. Что подскажете?

HTML код:

<div id="rmbr" onclick="checkbox()">
  <img class="left" id="rmbr_img" height="10" width="10" src="src/span.png">
   <p>Remember me</p>
</div>

JS код:

var remember = rmbr_img.getAttribute('src');

function checkbox() {
         if (remember == "src/span.png") {
 	 	remember = rmbr_img.setAttribute('src', 'src/span_act.png');
 	 }
 	 else {
 	 	remember = rmbr_img.setAttribute('src', 'src/span.png');
 	 }
}

Answer 1

[Ankhena]

потому-что с CSS-ом геморно кастомный чекбокс замутить

Ну прям

(усовершенствованный вариант со специально видимым фокусом, который потом можно кастомизировать как хочется)

Answer 2

[Олег]

Какие проблемы с версткой на CSS . Тут все просто

стили
input[type="checkbox"] + span{background-repeat:no-repeat;
background-position:left top;
display:inline-block;
width:21px;height:35px;
vertical-align:middle;}
input[type="checkbox"] + span{background-image:url(data:image/png;base64, ....картинка... );}
input[type="checkbox"]:checked + span{background-image:url(data:image/png;base64,....картинка...);}
верстка для чекбокса
<label><input name="" type="checkbox" ><span tabindex=целое_число></span> текст пояснение </label>

еще сам чекбокс через стили в дисплай ноне
tab= делает любой элемент выбираемым.
с клавиатуры чекбокс будет менять значение по пробелу.

Comments

[Danila]

еще сам чекбокс через стили в дисплай ноне

а потом попробуй свой чекбокс выбрать клавиатурой

[Gortyser]

Данила, фокус работает при visibility:hidden, но это не точно.
Upd: я не прав, тогда абсолютное позиционирование и нулевая прозрачность подойдут.

[Danila]

Gortyser, не работает
пример корректного скрытия инпута можно посмотреть в ответе Ankhena

[Олег]

невидимый чекбокс и следующий за ним спан вложены в лабел
для выбора по табу у спана добавлен атрибут таб ордера.
клик или нажатие обрабатывается label который делегирует его чекбоксу
для надежности можно добавить к label for="ид_чекбокса" и собственно ид чекбоксу.

<label for="idchk"><input type=checkbox id="idchk" ....><span tabindex=..></span> текст метки</label>

исправил ошибку не tab а tabindex

[Danila]

Олег, вместо того чтобы давать вредные советы, протестировал бы свою поделку
во-первых не tab, а атрибут tabindex
во-вторых то, что ты описал - работать не будет, span никакого отношения к чекбоксу не имеет, и никаких событий на пробел он магическим образом ему не передаст.

[Олег]

Данила, вы правы за 4 года забыл, что там действительно tabindex.
протестировать можете сами agr.ru/register/

Answer 3

[Gortyser]

Смысла в вашем чекбоксе нет совсем - он не привязан ни к какому значению. Но так как задача не в этом, то без разницы.
Ваш код заработает, если перенести строку var remember = rmbr_img.getAttribute('src'); в тело функции checkbox.