Как получить значение из мультиселекта?

@m0nte-cr1st0 · Регистрация: 15.01.2019

Студворк — интернет-сервис помощи студентам

Возможно, тема должна быть размещена в jQuery...

Есть следующий шаблон.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<div class="radio_select">
    <button class="toggleSel circlesSel" type='button'>
        <span class="flaticon-meeting"></span>
        <span>Добавить</span>
    </button>
    <div class="radio_list">
 
            <div class="com">
                <div class="checkboxwrap">
                    <input type="checkbox" class="checkbox" id="1">
                    <label for="1">title1</label>
                </div>
            </div>
            <div class="com">
                <div class="checkboxwrap">
                    <input type="checkbox" class="checkbox" id="2">
                    <label for="2">title2</label>
                </div>
            </div>
            <div class="com">
                <div class="checkboxwrap">
                    <input type="checkbox" class="checkbox" id="3">
                    <label for="3">title3</label>
                </div>
            </div>
 
    </div>
</div>

Это форма мльтиселекта. Значения в ней выбираются либо по клику на чекбокс, либо по клику на лейбл.

HTML5
1
2
                    <input type="checkbox" class="checkbox" id="...">
                    <label for="...">...</label>

Пытаюсь выводить эти значения в консоль - не получается.

JavaScript
1
2
3
4
5
6
7
8
9
<script src="libs/jquery/jquery-1.11.1.min.js"></script>
<script>
    $(document).ready(function () {                           
      $('.checkboxwrap').on('click', function(){               //так же пробовал здесь писать checkbox
        id = $(this).id;                                                      //нужно получить id
        console.log(id)
    });
  });
</script>

Желательно, чтобы выводились в консоль все активные, выбранные значения. То есть, если уже выбран элемент №1, то при выборе элемента №3, должны выводиться в консоль значения и первого, и третьего элементов (ведь это мультиселект). Если же я потом уберу селект с первого элемента, то должно вывестись значение только третьего элемента.

Добавлено через 12 минут
Хотя вряд ли это можно назвать мультиселектом. Скорее, форма отрисованная под мультиселект, с чекбоксами к каждому значению...

Добавлено через 20 минут
Если я верно понимаю, то этот скрипт должен хотя бы одно значение выводить при клике на чекбокс.. Но этого не происходит.

JavaScript
1
2
3
4
5
6
<script>
      $('.checkbox').click(function(){
        var id = $(this).attr('id');
        console.log(id);
  });
</script>

Добавлено через 20 минут
Этот код выводит значения (то я просто не верно jquery подключил. не думал, что его нужно, перед хтмл подключать). Но он выводит только одно значение - то, где нажат чекбокс. То есть, даже когда я снимаю с него селект - его выводит.
Я понимаю, что всё выводится так, как я написал в коде... Но мне нужно сделать под это условие.

Сообщение от m0nte-cr1st0

чтобы выводились в консоль все активные, выбранные значения. То есть, если уже выбран элемент №1, то при выборе элемента №3, должны выводиться в консоль значения и первого, и третьего элементов (ведь это мультиселект). Если же я потом уберу селект с первого элемента, то должно вывестись значение только третьего элемента.

Добавлено через 11 минут
Скорее всего, можно как-то через с помощью списка сделать.
Например, если при клике такого элемента ещё нет в списке - добавить. Если происходит повторный клик по элементу, который уже есть в списке (то есть селект снимается), то удалять элемент из списка... Но вот как это реализовать пока не знаю.

Добавлено через 9 минут
Вот, как пробовал. Но работает некорректно.

JavaScript
1
2
3
4
5
6
7
8
9
10
var l = [];
$('.checkbox').click(function(){
   var id = $(this).attr('id').toString();
   if (!(id in l)) {
      l.unshift(id)
   } else { 
      l.splice(indexOf(id, 1))
   }
   console.log(l);
  });

@fanatikus · 25.03.2019, 23:34

Сообщение от m0nte-cr1st0

Желательно, чтобы выводились в консоль все активные, выбранные значения. Т

JavaScript
1
2
3
4
5
6
7
8
9
$('.checkbox').change(function(){
    let objCheck = $('.checkbox');
    
    $.each(objCheck, (i,e) =>{
        if($(e).prop('checked')){
            console.log($(e).attr('id'));
        }
    })
})

@m0nte-cr1st0 · 26.03.2019, 01:07 **[ТС]**

fanatikus, благодарю. можно ли этот вывод сделать списком? потому как мне нужно будет эти значения по нажатию на сабмит в форме одним запросом через аякс передавать в джанго.
виноват, что я это сразу не указал.

@fanatikus · 26.03.2019, 01:17

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
$('.checkbox').change(function(){
    let objCheck = $('.checkbox');
    
    let listCheck = [];
    
    $.each(objCheck, (i,e) =>{
        if($(e).prop('checked')){
            listCheck.push($(e).attr('id'));
        }
    })
    
    console.log(listCheck);
})

@m0nte-cr1st0 · 26.03.2019, 01:24 **[ТС]**

Верно ли я понимаю этот код?

JavaScript
1
2
3
4
5
6
7
8
9
$('.checkbox').change(function(){    #Запускаем функцию по изменению в чекбоксе
    let objCheck = $('.checkbox');            #Присваиваем элемент
    
    $.each(objCheck, (i,e) =>{                 #Тут не совсем понятно. Но как я понял, то это итерация по всем чекбоксам? интересно, как вы отобрали все чекбоксы, если в переменной только один записан? i - индекс, = 0. или же номер итераци?
        if($(e).prop('checked')){                 #Если чекбокс выбран
            console.log($(e).attr('id'));          #выводим id
        }
    })
})

Добавлено через 4 минуты

Не по теме:

Кстати, рад видеть земляка на этом форуме

@fanatikus · 26.03.2019, 01:24

Сообщение от m0nte-cr1st0

let objCheck = $('.checkbox'); * * * * * *#Присваеиваем элемент

все элементы с классом checkbox

Сообщение от m0nte-cr1st0

Но как я понял, то это итерация по всем чекбоксам?

так точно

Сообщение от m0nte-cr1st0

if($(e).prop('checked')){ * * * * * * * * #Если чекбокс выбран
* * * * * * console.log($(e).attr('id')); * * * * *#выводим id

да

@m0nte-cr1st0 · 26.03.2019, 01:27 **[ТС]**

fanatikus, мой код совсем неверен?

JavaScript
1
2
3
4
5
6
7
8
9
10
var l = [];
$('.checkbox').click(function(){
   var id = $(this).attr('id').toString();
   if (!(id in l)) {
      l.unshift(id)
   } else { 
      l.splice(indexOf(id, 1))
   }
   console.log(l);
  });

Он работает верно только до определённого момента...

@fanatikus · 26.03.2019, 01:45

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var l = [];
$('.checkbox').click(function () {
 
    let id = $(this).attr('id');
 
    if (!(id in l)) {
        l.unshift(id)
    } else {
        let index = $.inArray(id, l);
 
        if (index >= 0)
            l.splice(index, 1);
    }
    console.log(l);
});

@m0nte-cr1st0 · 26.03.2019, 01:58 **[ТС]**

fanatikus, всё-равно какое-то странное поведение
https://codepen.io/m0nte-cr1st... itors=1011

@timen · 26.03.2019, 12:48

m0nte-cr1st0,
'in' так в js неиспользуется.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
var l = [];
$('.checkbox').click(function () {
 
    let id = $(this).attr('id');
    if (l.indexOf(id)==-1) {
        l.unshift(id)
    }
    console.log(l);
    var ar = $.map($('input[type="checkbox"]:checked.checkbox'), v => v.id);
    console.log(ar.length);
});

@fanatikus · 26.03.2019, 13:14

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var l = [];
$('.checkbox').click(function () {
 
    let id = $(this).attr('id');
    
    let index = $.inArray(id, l);
    
    if($(this).prop('checked') && index < 0){
        if(index < 0){
            l.unshift(id)
        }
    }
    
    if(index >= 0 && !$(this).prop('checked')){
        l.splice(index, 1);
    }
    
    console.log(l);
});

Новые блоги и статьи Все статьи Все блоги /
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .

@m0nte-cr1st0 1043 / 578 / 242 Регистрация: 15.01.2019 Сообщений: 2,178 Записей в блоге: 1
	26.03.2019, 01:07 [ТС]
	fanatikus, благодарю. можно ли этот вывод сделать списком? потому как мне нужно будет эти значения по нажатию на сабмит в форме одним запросом через аякс передавать в джанго. виноват, что я это сразу не указал. 0

@m0nte-cr1st0 1043 / 578 / 242 Регистрация: 15.01.2019 Сообщений: 2,178 Записей в блоге: 1
	26.03.2019, 01:58 [ТС]
	fanatikus, всё-равно какое-то странное поведение https://codepen.io/m0nte-cr1st... itors=1011 0

Как получить значение из мультиселекта?

Решение