Как отправить ajax запрос по чекбоксам?

Question

[nata32]

Добрый день, есть чекбоксы, при выборе отправляется запрос, но проблема в том, что если выбран один чекбокс и выбрать еще, то отправляются параметры со всех выбранных чекбоксов, а нужно что бы отправился только с вновь выбранного. То есть выбрали один чекбокс, пришел ответ, вывели в нужном месте, при выборе еще оного чекбокса, должен придти ответ и его выводим в нужном месте и т.д, а получается если выбран один и выбрать второй то отправляется [ "id1", "id2" ]
Код который пытаюсь использовать.

<input type="checkbox" class="checkbox" name="id1"/> 1
<input type="checkbox" class="checkbox" name="id2"/> 2
<input type="checkbox" class="checkbox" name="id3"/> 3
<div id="id1"></div>
<div id="id2"></div>
<div id="id3"></div>
<script>
$('.checkbox').change(function(){
        var data = [];
    $('.checkbox').each(function(){
        if( $(this).is(':checked') ){
           data.push( $(this).attr('name'));
        }
    });
    console.log(data);

$.ajax({
                url: '/out.php',
                type: 'GET',
                data: data,

                success: function(html) {

                    $('#'+ data).html(html);
                }
                });
            });
</script>

Comments

[WbICHA]

Чисто из любопытства, зачем в 2026 учить jquery?

[tgarl]

ну тут много причин, выбирайте любую, вот навскидку парочка:
- он проще чем нативный JS
- порог вхождения минимальный
- 2/3 всех проектов его используют

[WbICHA]

tgarl,

- он проще чем нативный JS
- порог вхождения минимальный
- 2/3 всех проектов его используют

- прям сильно проще, чем современный натив?
- повторение первого пункта
- каких проектов? Лютых легаси, которые никто и так не трогает? Зачем новичку на них ориентироваться?

[tgarl]

прям сильно проще, чем современный натив

по мне так в разы, никаких тебе лишних телодвижений (ИД или Класс).метод() - все остальное под капотом и ты не думаешь а как оно работает, работает и ладно, отсюда и порог вхождения такой, тебе главное запомнить 5-10 методов и 90% задач будет решено

каких проектов? Лютых легаси, которые никто и так не трогает? Зачем новичку на них ориентироваться?

не знаю как вы, а я за последние несколько лет только с 1 проектом сталкивался где не было jquery - и тот как ни странно был полный самопис

[WbICHA]

tgarl,

по мне так в разы, никаких тебе лишних телодвижений (ИД или Класс).метод() - все остальное под капотом и ты не думаешь а как оно работает, работает и ладно, отсюда и порог вхождения такой, тебе главное запомнить 5-10 методов и 90% задач будет решено

В нативе сегодня всё тоже самое, только чуть больше кода. Когда последний раз писали на современном нативе?

не знаю как вы, а я за последние несколько лет только с 1 проектом сталкивался где не было jquery - и тот как ни странно был полный самопис

Фрилансер?

Answer 1

[Rsa97]

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

Comments

[nata32]

спасибо, точно, убрала и все работает, не догнала сразу )))
тогда еще одна проблема ) при снятие чекбокса, как сделать что бы пропали полученные данные ? сейчас получfется если снять чекбокс, то приходит пустая data и дает тут ошибку $('#'+ data).html(html);

[Rsa97]

nata32, Если :checked, то посылать запрос, если нет, то чистить данные.

[nata32]

Rsa97, я понимаю что чистить данные, я не знаю как это на js реализовать

[Rsa97]

nata32,
Так же, как записываете возвращённое значение, только пустую строку.
$('#'+ data).html('');

[nata32]

Rsa97, так в том и дело, что при снятие чекбока $('#'+ data) пустая в консоле [] и дает ошибку

[nata32]

Вопрос закрыт, методом тыка ) код решения, может кому пригодиться

$('.checkbox').change(function(){
        var data = [];
 if (!this.checked) {
    data.push( $(this).attr('name'));
        $('#'+ data).html('');
      } else if( $(this).is(':checked') ){
           data.push( $(this).attr('name'));
$.ajax({
                url: '/out.php',
                type: 'GET',
                data: data,
                success: function(html) {
                    $('#'+ data).html(html);

                }
                });
                }
            });

[Михаил Ливач]

nata32, исправил по своему разумению:

$('.checkbox').change(function(){
    const name = $(this).attr('name');
    const $target = $('#'+ name);

    if( $(this).is(':checked') ){
        $.ajax({
            url: '/out.php',
            type: 'GET',
            data: [name],
            success: function(html) {
                $target.html(html);

            }
        });
    } else {
        $target.html('');
    }
});

У вас только два состояния - чекбокс отмечен или нет. Поэтому добавлять второе услоевие ( "else if" ) не нужно.
Далее, у вас в коде был баг, и всё работало только потому, что приведение массива к строке неявно вызывает склейку его элементов через запятую.
Далее, если в массиве только один элемент - почти наверняка массив не нужен.
Наконец: данные по AJAX лучше гонять через POST, чтобы не засорять историю браузера

[Михаил Ливач]

кстати, попробуйте переписать это без jQuery, просто на современном Javascript

[nata32]

Михаил Ливач, спасибо, понятно, а не подскажите как вместо чекбоксов можно использовать ссылки ? типа
1
2
нашла в сети что надо типа такого

$('#myLink').click(function(event) {
    event.preventDefault();

но никак не могу сделать что бы в myLink перлась id ссылки
спасибо.

[nata32]

ссылки прописала просто, они и сделались ссылками, иела ввиду вот так ссылки

<a href="#" id="id1">1</a>
<a href="#" id="id2">2</a>

[nata32]

Михаил Ливач, честно говоря нет особо времени изучать с 0, может оно и лучше, но я с JS не так часто сталкиваюсь, а по jQuery есть небольшие знания и в сети много примеров из которых можно что то вытащить под себя.
Чисто ради интереса, если не трудно, покажите код как вы предлагаете.
Спасибо.

[nata32]

вроде решила проблему, прописала в ссылку onclick="getLink( и function getLink передаю параметр, может конечно костыльно и есть более оригинальное решение, но работает )