Форум

dizelvis · #1 (**permalink**) 03.07.2019, 16:20

Добры день!

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

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

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

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

Спасибо, простите новичка за простой вопрос

рони · #2 (**permalink**) 03.07.2019, 16:53

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>

Malleys · #3 (**permalink**) 03.07.2019, 17:16

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

Вот мой вариант... https://codepen.io/Malleys/pen/BgVWBm?editors=0010

рони · #4 (**permalink**) 03.07.2019, 17:35

Сообщение от Malleys

Да оно нажимается, но для этого скрипт не нужен

можно пример?

Сообщение от Malleys

где функционал!

код рабочий,проверку левой клавиши, можно вынести в отдельную функцию при желании.

рони · #5 (**permalink**) 03.07.2019, 17:48

Сообщение от рони

проверку левой клавиши, можно вынести в отдельную функцию при желании.

<!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

Malleys,
вопрос по css, можно ли как-то изменить цвет фона checkbox?

Malleys · #7 (**permalink**) 03.07.2019, 18:25

Сообщение от рони

код рабочий

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

Сообщение от рони

вопрос по 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

Сообщение от Malleys

После того, как вы применили appearance: none;, стилизация состояния ложится на вас! Пример...

благодарю! не знал что можно отменить внешний вид.

рони · #9 (**permalink**) 03.07.2019, 19:33

Сообщение от Malleys

Вот мой вариант

вопросы:
почему начать выделение можно только нажав на checkbox, а не рядом?
не всегда срабатывает отключение выделения.
(проверял мышкой)

рони · #10 (**permalink**) 03.07.2019, 20:00

Сообщение от рони

не всегда срабатывает отключение выделения.

возможно это связано с drag-and-drop, и что-то нужно отменить.

Форум

Справочник

Discord чат

Курсы javascript