Как передать значения нескольких флажков с помощью jquery ajax

Чтобы получить значение из нескольких флажков, я использую этот код:

 <form class = "myform" method = "post" action = "">
        <input type = "checkbox" class = "checkbox" value = "11" /><br>
        <input type = "checkbox" class = "checkbox" value = "22" /><br>
        <input type = "submit" value = "Go" />
  </form>

Аякс:

$(document).ready(function(){
            $('.myform').on('submit', function(e){
                //Stop the form from submitting itself to the server.
                e.preventDefault();
                var checkboxvalue = $('.checkbox').val();
                $.ajax({
                    type: "POST",
                    url: '',
                    data: {checkboxvalue: checkboxvalue},
                    success: function(data){
                        $('.response').html(data);
                    }
                });
            });
        });

PHP:

   if ($_SERVER['REQUEST_METHOD'] == "POST") {  

      $value = false;
      if (isset($_POST['checkboxvalue'])){
         $value = $_POST['checkboxvalue'];
      }

      echo 'The value was: ' . $value;
      exit;
   }

Проблема в том, что при установке второго флажка я получаю значение 11 , это значение первого флажка. При установке обоих флажков я также получаю значение 11

Чего я хочу добиться: если я поставлю первый флажок, он должен дать мне 11 в качестве вывода. Установив второй флажок, он должен вывести 22 в качестве значения. И при установке обоих флажков он должен вывести 11 и 22 в качестве значения.

Как я могу достичь этого?

добавьте json stringify в свои данные ajax @mudraya

saurabh kamble 19.02.2019 12:36

Будет больше одного элемента с классом checkbox, так что посмотрите на jQuery каждый()

RiggsFolly 19.02.2019 12:37
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
3
2
114
4

Ответы 4

Вам нужно добавить атрибут имени, чтобы проверить

<input type = "checkbox" class = "checkbox" name = "value-check" value = "11" /><br>

var checkboxvalue = [];
        $.each($("input[name='value-check']:checked"), function(){            
            checkboxvalue.push($(this).val());
        });

я попробовал это, и теперь эхо: The value was: Array

mudraya 19.02.2019 12:45

@mudraya да, это массив

Shibon 19.02.2019 12:48

вы можете использовать checkboxvalue.join(", "), чтобы преобразовать его в отдельную строку запятой

Shibon 19.02.2019 12:49

или вы можете использовать implode(" ",$value); в php

Shibon 19.02.2019 13:06

Вам нужно установить флажок, который выбран, проблема с вашим кодом в том, что он всегда дает вам значение первого выбранного флажка всегда

var chkArray = [];
	
$(".checkbox:checked").each(function() {
	chkArray.push($(this).val());
});
	
var selected;
selected = chkArray.join(',') ;

console.info(selected)
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div><input type = "checkbox" value = "1" class = "checkbox"> Value 1</div>
    <div><input type = "checkbox" value = "2" class = "checkbox" checked = "checked"> Value 2</div>
    <div><input type = "checkbox" value = "3" class = "checkbox"> Value 3</div>
    <div><input type = "checkbox" value = "4" class = "checkbox"checked = "checked"> Value 4</div>
    <div><input type = "checkbox" value = "5" class = "checkbox"> Value 5</div>

Вам нужно создать массив и заполнить значениями, если флажок установлен.

$(document).ready(function(){
        $('.myform').on('submit', function(e){
            //Stop the form from submitting itself to the server.
            e.preventDefault();
          var values = [];
          $('.checkbox').each(function() {
            if ($(this).is(':checked')) {
              values.push($(this).val());
            }

          });
          console.info(values);
        });
    });

См. Кодепен

ИСПОЛЬЗОВАТЬ ЭТО

$(document).ready(function(){
   $('.myform').on('submit', function(e){
        e.preventDefault();
        var checkboxvalue =  [];    
        $("input[type=checkbox]:checked").each(function(i){
          checkboxvalue.push( i.value );
        });
      $.ajax({
                type: "POST",
                url: '',
                data: {checkboxvalue: checkboxvalue},
                success: function(data){
                    $('.response').html(data);
                }
            });
        });
    });

PHP

 if ($_SERVER['REQUEST_METHOD'] == "POST") {  
  $value = false;
  /* the check box value in array*/
  print_r($_POST['checkboxvalue']);
  if (isset($_POST['checkboxvalue'])){
     $value = $_POST['checkboxvalue'];
  }      
  exit;
  }

Я пробовал это, но у меня все еще не работает. Не могли бы вы дать мне полный рабочий код, пожалуйста? Итак, форма, js и php? Я не так хорошо знаком с ajax

mudraya 19.02.2019 13:02

к сожалению, до сих пор нет эха

mudraya 19.02.2019 13:19

вы должны проверить консоль.

Sandeep K. 19.02.2019 13:22

Другие вопросы по теме