Как вывести value всех отмеченных checkbox?

Question

[DimaJZ]

Вот весь код:

<div id="form_result"></div>
<hr>
<form id="orderCallBack" action="process.php">
  Ваше имя: <input type="text" name="name" value=""><br>
  Ваш телефон: <input type="text" name="phone" value=""><br>
  Ваше сообщение:<br> <textarea name="message"></textarea><br>
  
  <div class="additional-options">
                       <div class="calculator__form-input">
                           <input type="checkbox" value="Оцинкованная конструкция" id="galvanized" name="опции">
                           <label for="galvanized">Оцинкованная конструкция</label>
                       </div>
                       <div class="calculator__form-input">
                           <input type="checkbox" value="Стеклопакет" id="double-glazed" name="опции">
                           <label for="double-glazed">Стеклопакет</label>
                       </div>
                       <div class="calculator__form-input">
                           <input type="checkbox" value="Кованная решетка" id="lattice" name="опции">
                           <label for="lattice">Кованная решетка или элементы ковки</label>
                       </div>
                       <div class="calculator__form-input">
                           <input type="checkbox" value="Накладки латуни" id="pads" name="опции">
                           <label for="pads">Накладки из нержавейки или латуни</label>
                       </div>
                   </div>
                   
                   <select class="form-control select-input col-7" name="Толщина">
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                    </select>
                    
                    <select class="form-control select-input col-7" name="Отделка снаружи:">
                        <option  value="1">1</option>
                        <option  value="2">2</option>
                        <option  value="3">3</option>
                        <option  value="4">4</option>
                    </select>
                    
                     <div class="calculator__form-input">
                            <input type="radio" name="Куда нужна дверь" value="наружная" id="outdoor">
                            <label for="outdoor">наружная (имеет контакт улицей)</label>
                        </div>
                        <div class="calculator__form-input">
                            <input type="radio" name="Куда нужна дверь" value="внутри" id="internal">
                            <label for="internal">внутряняя (ставится внутри помещения)</label>
                        </div>
                        
  
  <input type="submit" name="submit1" value="Заказать звонок" data-method="serialize"><br>
  <input type="submit" name="submit2" value="Заказать звонок" data-method="serializeArray">
</form>

<script>

$(function() {
  $('#orderCallBack input[type="submit"]').click(function(e) {
      var $data = $('#orderCallBack').serializeArray();
// переберём каждое значение массива и выведем его в формате имяЭлемента=значение в консоль
$.each($data,function(){
  console.log(this.name+'='+this.value);
});

    e.preventDefault();
   
    $.ajax({
      url: 'process.php',
      type: 'post',
      data: $data,
      success: function(result) {
        $('#form_result').html(result);
      }
    })
  });
});
</script>

Есть переменная $data которая выводит результат, но выводит только последние значения отмеченного checkbox. Подскажите пожалуйста, как вывести все value отмеченных checkbox в строку через запятую?

<?php
// переменная для сохранения результата
$data='';
// переберём массив $_POST
foreach ($_POST as $key => $value) {
  // добавим в переменную $data имя и значение ключа
  $data .= $key . ' = ' . $value . ' ';
}

echo $data;

?>

Comments

[MikMik]

Попробуй так

var data = $('input:checkbox:checked');

Соберет в data все отмеченные чекбоксы

Answer 1

[Александр]

Добавьте класс для input например - input class="AllValueСheckbox" и еще одно поле типа hidden -
input type="hidden" name="AllСheckbox" value=""

и jq

$(document).on('change', 'input.AllValueСheckbox', function() {
   $AllValue=$('input.AllValueСheckbox:checked').map(function() {return this.value;}).get();
   $('input[name="AllСheckbox"]').val($AllValue.join());
});

при клике на Сheckbox
input type="hidden" name="AllСheckbox" value=" будут добавлены значения в нужном формате"
соответственно ваша задача решается получением значения поля AllСheckbox

Comments

[DimaJZ]

Попробую, спасибо