Снимать чекбоксы при mousemove
Добры день!
Имею страницу с множеством чекбоксов, класс у которых .regular-checkbox Нужно иметь возможность массово выделять/снимать выделение с зажатой клавишей мыши или touch-устройства
function checker () {
// как в эту функцию передать конкретный элемент из массива el и определить зажата ли левая кнопка мыши?
}
var el = document.getElementsByClassName(\'regular-checkbox\');
el.addEventListener(\'mousemove\', checker );
Спасибо, простите новичка за простой вопрос |
dizelvis,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<script>
const checker = ({target, which}) => target.classList.contains("regular-checkbox") && which == 1 && (target.checked = true)
document.addEventListener('mousemove', checker);
</script>
</head>
<body>
<input type="checkbox" class="regular-checkbox">
<input type="checkbox" class="regular-checkbox">
<input type="checkbox" class="regular-checkbox">
<input type="checkbox" class="regular-checkbox">
<input type="checkbox" class="regular-checkbox">
</body>
</html>
|
рони, тыкал и водил, так и не понял, где функционал! (Да оно нажимается, но для этого скрипт не нужен) И зачем оно проверяет даже тогда, когда не начинали вести мышью
Вот мой вариант... https://codepen.io/Malleys/pen/BgVWBm?editors=0010 |
Цитата:
Цитата:
|
Цитата:
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.regular-checkbox{
height: 50px;
width: 50px;
}
</style>
<script>
const checker = ({target}) => target.classList.contains("regular-checkbox") && (target.checked = true);
addEventListener('mousedown', ({which}) => which == 1 && addEventListener('mousemove', checker));
addEventListener('mouseup', () => removeEventListener('mousemove', checker))
</script>
</head>
<body>
<input type="checkbox" class="regular-checkbox">
<input type="checkbox" class="regular-checkbox">
<input type="checkbox" class="regular-checkbox">
<input type="checkbox" class="regular-checkbox">
<input type="checkbox" class="regular-checkbox">
</body>
</html>
|
Malleys,
вопрос по css, можно ли как-то изменить цвет фона checkbox? |
Цитата:
Цитата:
input[type="checkbox"] {
/* -moz-appearance: none;*/ /* возможно для старых Firefox */
-webkit-appearance: none;
appearance: none;
}
После того, как вы применили appearance: none;, стилизация состояния ложится на вас! Пример... https://codepen.io/Malleys/pen/ZNZvqV?editors=0100 |
Цитата:
|
Цитата:
почему начать выделение можно только нажав на checkbox, а не рядом? не всегда срабатывает отключение выделения. (проверял мышкой) |
Цитата:
|
| Часовой пояс GMT +3, время: 05:25. |