Как подобное реализовать на чистом js? [Архив форума]

Просмотр полной версии : Как подобное реализовать на чистом js?

AntonMs

04.09.2015, 22:00

Как подобное реализовать на чистом js, что-бы не прописывать кучу .onchange событий к каждому чекбоксу?
$(document.querySelectorAll('input[type=checkbox]')).change(function(){
console.log(this.value)
})

Lemme

04.09.2015, 22:13

че, прям всем всем на странице?
http://javascript.ru/forum/css-html/58094-pereimenovat-identifikator-na-zagruzhaemojj-stranice.html#post387197

Там не про события, но метод тот же.

А лучше использовать делегирование
https://learn.javascript.ru/event-delegation

caetus

04.09.2015, 22:14

<body>
<div id="div">

<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
</div>
</body>

<script>

var div = document.getElementById('div');

div.addEventListener('change', function (e) {
e = e.target || e.srcElement;
console.log(e.value)

},false)

</script>

forwardonly2015

04.09.2015, 22:16

<html>

<head>
<meta charset="utf-8">

</head>

<body>

<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">

<script>

show=function(){alert(1)}
;[].forEach.call(document.querySelectorAll('input[type=checkbox]'), function(box){box.onchange=show})

</script>
</body>
</html>

caetus

04.09.2015, 22:18

forwardonly2015,
мне кажется он тоже самое сделал только на Jquery

forwardonly2015

04.09.2015, 22:20

caetus,
Ну так он и спрашивал, как сделать это на чистом

Lemme

04.09.2015, 22:21

tsigel, а зачем в два прохода то?

caetus

04.09.2015, 22:22

ты прав я невнимательно прочёл )

AntonMs

04.09.2015, 22:39

Спасибо, подучился :)

tsigel

05.09.2015, 00:09

Lemme,
Затупил