Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 03.07.2019, 16:20
Интересующийся
Отправить личное сообщение для dizelvis Посмотреть профиль Найти все сообщения от dizelvis
 
Регистрация: 05.06.2017
Сообщений: 15

Снимать чекбоксы при mousemove
Добры день!

Имею страницу с множеством чекбоксов, класс у которых .regular-checkbox

Нужно иметь возможность массово выделять/снимать выделение с зажатой клавишей мыши или touch-устройства

function checker () {
// как в эту функцию передать конкретный элемент из массива el и определить зажата ли левая кнопка мыши?
}

var el = document.getElementsByClassName(\'regular-checkbox\');
el.addEventListener(\'mousemove\', checker );


Спасибо, простите новичка за простой вопрос
Ответить с цитированием
  #2 (permalink)  
Старый 03.07.2019, 16:53
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,115

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>
Ответить с цитированием
  #3 (permalink)  
Старый 03.07.2019, 17:16
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

рони, тыкал и водил, так и не понял, где функционал! (Да оно нажимается, но для этого скрипт не нужен) И зачем оно проверяет даже тогда, когда не начинали вести мышью или пальцем (пальцем не работает)?

Вот мой вариант... https://codepen.io/Malleys/pen/BgVWBm?editors=0010
Ответить с цитированием
  #4 (permalink)  
Старый 03.07.2019, 17:35
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,115

Сообщение от Malleys
Да оно нажимается, но для этого скрипт не нужен
можно пример?
Сообщение от Malleys
где функционал!
код рабочий,проверку левой клавиши, можно вынести в отдельную функцию при желании.
Ответить с цитированием
  #5 (permalink)  
Старый 03.07.2019, 17:48
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,115

Сообщение от рони
проверку левой клавиши, можно вынести в отдельную функцию при желании.
<!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>
Ответить с цитированием
  #6 (permalink)  
Старый 03.07.2019, 17:50
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,115

Malleys,
вопрос по css, можно ли как-то изменить цвет фона checkbox?
Ответить с цитированием
  #7 (permalink)  
Старый 03.07.2019, 18:25
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Сообщение от рони
код рабочий
У вас в обоих случаях код работает только с мышью, он не работает на планшете и телефоне! Код, который я приводил, работает на устройствах и не требует наличия мыши.

Сообщение от рони
вопрос по css, можно ли как-то изменить цвет фона checkbox?
Можно, для этого есть свойство background-color. Если вам мешает предустановленное оформление от браузера, то используйте appearance: none;

input[type="checkbox"] {
    /* -moz-appearance: none;*/ /* возможно для старых Firefox */
    -webkit-appearance: none;
    appearance: none;
}


После того, как вы применили appearance: none;, стилизация состояния ложится на вас! Пример... https://codepen.io/Malleys/pen/ZNZvqV?editors=0100
Ответить с цитированием
  #8 (permalink)  
Старый 03.07.2019, 18:42
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,115

Сообщение от Malleys
После того, как вы применили appearance: none;, стилизация состояния ложится на вас! Пример...
благодарю! не знал что можно отменить внешний вид.
Ответить с цитированием
  #9 (permalink)  
Старый 03.07.2019, 19:33
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,115

Сообщение от Malleys
Вот мой вариант
вопросы:
почему начать выделение можно только нажав на checkbox, а не рядом?
не всегда срабатывает отключение выделения.
(проверял мышкой)
Ответить с цитированием
  #10 (permalink)  
Старый 03.07.2019, 20:00
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,115

Сообщение от рони
не всегда срабатывает отключение выделения.
возможно это связано с drag-and-drop, и что-то нужно отменить.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
При запуске теста вопросы в произвольеном порядке Dr.Maksss Элементы интерфейса 13 30.09.2015 21:53
Как восстановить инфу из sessionStorage при выполнении определенных условий? ligisayan jQuery 1 26.06.2015 09:34
Смена класса у отдельного div при нажатии на ссылку Maxim-Ra Элементы интерфейса 6 15.02.2015 12:20
Изменение прозрачности при клике AJIUK jQuery 8 09.03.2014 16:00
при нажатии на раздел меню поворачивается маркер Сергей545 Элементы интерфейса 5 08.12.2013 22:15