Как правильно сгруппировать чекбоксы с именами на чистом js?

Question

[Genri_Rus]

Вот пример: ссылка

Почему-то не получается на чистом js отправить имена и значения у checkbox.
Как правильно на чистом js чекбоксы с именами сгруппировать?

Если сделать так:

if (option.checked) {
	let optionName  = option.name,
		  optionValue = option.value;
      
	options[optionName] = optionValue;
}

То радиокнопки сохраняются, а массив значений у чекбоксов нет.

Answer 1

[Sergei Nazarenko]

document.querySelectorAll(".option__item input[type=checkbox]:checked, .option__item input[type=radio]:checked");

Comments

[Genri_Rus]

Это нужно передать в data у ajax?

[Genri_Rus]

Это нужно передать в data у ajax?

Дело в том, что так не работает

[Sergei Nazarenko]

Genri_Rus, https://developer.mozilla.org/en-US/docs/Web/API/F...

[Genri_Rus]

Sergei Nazarenko, получается только с помощью fetch будет работать ?

[Sergei Nazarenko]

Genri_Rus, Ну ты хотел на чистом js вот тебе чистый что ни на есть разбирайся.

[Genri_Rus]

Sergei Nazarenko, я думаю что тут дело не в ajax, а в массиве nodeList.

Как допустим собрать в цикле имена и значения у чекбоксов?

Может есть пример их группирования?

[Sergei Nazarenko]

Genri_Rus, зачем ты пытаешься jquery с не jquery. Тут используй или одно или другое. А так собираешь данные группируешь их в json и отправляешь.

[Genri_Rus]

Sergei Nazarenko, так а если не отправлять данные, то тогда как их правильно сгруппировать ?

Мне нужно сгруппировать чекбоксы по имени и значению.

[Sergei Nazarenko]

JSON.stringify() JSON.parse()

https://developer.mozilla.org/en-US/docs/Web/JavaS...

[Genri_Rus]

Sergei Nazarenko, так ?

JSON.stringify(document.querySelectorAll(".option__item input[type=checkbox]:checked, .option__item input[type=radio]:checked"));

[Sergei Nazarenko]

Genri_Rus, нет

[Sergei Nazarenko]

Genri_Rus,

const checkboxes = document.querySelectorAll('.option__item input[type="checkbox"]:checked, .option__item input[type="radio"]:checked');

checkboxes.forEach(item => {
  let json = JSON.stringify({value : item.value, name: item.name});  
  console.log(json);
});

[Genri_Rus]

Sergei Nazarenko, спасибо.
Дело в том, что если выбрать сразу 3 value у чекбокса, то json сохранит только первый.

[Sergei Nazarenko]

Genri_Rus, вместо options[optionName] = optionValue;

в своем примере сделай

options.push({name: optionName, value: optionValue});

[Genri_Rus]

Sergei Nazarenko, еще такой момент, мне в php нужно обратиться к массиву options вот так:

$_POST['options']['building-materials'][10], как в js сделать такой массив ?

spoiler

Пример: ссылка

[Sergei Nazarenko]

Genri_Rus,

let obj = {options: {'building-materials': {10: "Дерево"}}};

console.log(obj['options']['building-materials'][10]);

[Genri_Rus]

Sergei Nazarenko, вот, а как с помощью js в моем примере это динамически сделать ?