Как передать значения inpyt type checkbox в input type hidden?

Question

[Сергей вопросов]

Здравствуйте. Такой вопрос, на странице расположен главный

<input class="one" type="hidden" name="variants" value="" />

Также расположено много разных чекбоксов, например:

<label><input type="checkbox" name="xxs">xxs</label>
<label><input type="checkbox" name="xs">xs</label>
<label><input type="checkbox" name="s">s</label>
<label><input type="checkbox" name="m">m</label>
<label><input type="checkbox" name="l">l</label>

и т.д.

Как сделать так, чтобы при выборе чекбоксов их значения через запятую попадали (и так-же убирались) в главный input.one?

Массив не подходит! Нужно именно в одной строке через запятую!

Т.е. чекнул я например xxs / s / l и в главном input значение получилось-бы

<input class="one" type="hidden" name="variants" value="xxs,s,l," />

Comments

[OKyJIucT]

Почему не подходит? Чем и как обрабатывать будете данные из поля?

[Сергей вопросов]

OKyJIucT, в предыдущем вашем ответе я не учел, что у меня будет создаваться новая строка в бд под каждое значение.
Смотрите, у меня есть товар, в нем несколько вариантов может быть. В каждом варианте есть еще поля, а именно: цена, артикул и т.д. по этому мне нужно именно в одной строке вводить эти значения.

В итоге будет получаться поле например (size) в котором через запятую значения (например XS, S, L,)

Обработка на стороне шаблона у меня такая:

{$sizes=','|explode:$product->variant->size}
{foreach $sizes as $size}<div>{$size}</div>{/foreach}

Ну и соответственно я уже получаю все значения из по отдельности в любом удобном для меня виде, в выше показанном примере результат такой:

<div>XS</div>
<div>S</div>
<div>L</div>

[OKyJIucT]

А решение следующее: при клике на любой из видимых инпутов перебираете активные и склеиваете в строку с разделителем "запятая". Но уверен, что с массивами намного проще все решить без дополнительных костылей.

[OKyJIucT]

smartycms, вы можете на бекенде склеивать данные в строку. А вообще для таких целей используют отдельную таблицу, где каждая строка будет иметь айди товара и один из размеров. И джойном можно все размеры достать одним запросом.

Answer 1

[Алексей Ярков]

https://jsfiddle.net/dr688at1/

Comments

[Сергей вопросов]

Большое спасибо :) То, что нужно!

[Сергей вопросов]

Скажите, а можно-ли как-то привести это к jquery виду? Т.к. на странице будет много <div class="block"></div> внутри которого будут такие чекбоксы с инпутами и соответственно скрипт должен будет выполняться внутри родителя

[Алексей Ярков]

smartycms, а зачем вам jQuery? Для выборки DOM элементов? А чем document.querySelectorAll не угодил?
Приведите пример верстки, покажу как на jQuery переписать.

[Сергей вопросов]

Алексей Ярков, Вот, посмотрите https://jsfiddle.net/dr688at1/5/
Нужно чтобы скрипт выполнялся только внутри каждого <div class="block"></div> при этом каждому блоку разные классы назначить нет возможности т.к. будут динамические элементы на сайте.