Как собрать массив параметров GET через запятую?

Question

[Алексей]

Привет! Есть форма, в которой несколько десятков чекбоксов.

<form method="get">
   <input tupe="checkbox" name="tags[]" value="1">
   <input tupe="checkbox" name="tags[]" value="2">
   <input tupe="checkbox" name="tags[]" value="3">
</form>

И сейчас при отправке формы я получают такую ссылку в адресной строке:
/page.html?tags%5B%5D=1&tags%5B%5D=2$tags%5B%5D=3
Как сделать такую, более красивую?
/page.html?tags=1,2,3

Answer 1

[Сергей Соколов]

Можно не отправлять форму, а перехватить событие отправки и переформатировать данные по-своему:

$( "form" ).on( "submit", function( event ) {
  event.preventDefault();
  var tags=[];
  $('input:checkbox:checked',this).each((i,e)=>{tags.push(e.value)});
  var params = "tags=" + tags.join(',');  // "tags=1,2,3" если все три выбраны
  // дальше либо перенаправляйте браузер window.location=... либо ajax'ом отправляйте данные
});

Fiddle.

Comments

[Алексей]

То, что нужно... а если вместе с чекбоксами нужно отправить еще и другие данные формы, точно также выбирать каждый селектами по id?

Обычно я собираю данные формы через serialize(). Это удобно, потому что не нужно изменять код js при добавлении или удалении элементов. Можно ил как-то уже после serialize изменить эти чекбоксы?

[Сергей Соколов]

Евгений: можно: decodeURIComponent(), потом разделите параметры по символу "&" на пары, потом по символу "=" на ключ-значение, потом для повторяющихся ключей соберите значения в массив. Лучше выбирайте селекторами )

[Сергей Соколов]

есть же .serializeArray() – вернет массив объектов с name= и value=. Но придётся повозиться, собирая множественные tags[] в один массив. А ещё их может вообще не быть, если ни одного чекбокса не отметили.