Как сделать кнопку «принять всё»?

Question

[Night386]

Всем добрый день! есть список объектов напротив каждого есть кнопки чекбокс ( принять и отклонить ) как можно сделать одну кнопку "принять все" при выделении нескольких чекбоксов у обьектов ?

<div class="actions">
                            <button class="btn btn-default reject item-action-button" type="button" data-object-id="{{row.id}}">Отклонить</button>
                            <button class="btn btn-primary approve item-action-button" type="button" data-object-id="{{row.id}}">Принять</button>
                        </div>

jQuery(document).ready(function ($) {

                $('#moderation_items').on('click', function (e) {
                    if (e.hasOwnProperty('target') && e.target.localName && (e.target.localName === 'button')) {
                        e.preventDefault();
                        var target = $(e.target),
                            objectId = parseInt(target.attr('data-object-id')),
                            action = 'reject',
                            dataArr = [];
                        if (isNaN(objectId)) {
                            alert('Не удалось определить идентификатор объекта.');
                            return false;
                        }
                        var item = $('#item-' + objectId),
                            services = item.find('.services'),
                            servicesChecked = services.find('input[type="checkbox"]:checked').not(':disabled'),
                            servicesCheckedLabels = servicesChecked.closest('label'),
                            actions = item.find('.actions'),
                            actionButtons = actions.find('.item-action-button');
                        if (item.length <= 0) {
                            alert('Не удалось найти объект с идентификатором: ' + objectId);
                            return false;
                        }
                        if (servicesChecked.length <= 0) {
                            alert('Выберите хотя бы один сервис, чтобы выполнить это действие.');
                            return false;
                        }

                        if (target.hasClass('approve')) {
                            action = 'approve';
                        }

                        dataArr.push({ name: 'id', value: objectId });
                        dataArr.push({ name: 'action', value: action });
                        servicesChecked.each(function (i, v) {
                            dataArr.push({ name: v.name, value: v.value });
                        });

                        actionButtons.prop('disabled', true);
                        servicesChecked.prop('disabled', true);
                        servicesCheckedLabels.addClass('disabled');
                        $.ajax({
                            url: '/ajax/moderation',
                            cache: false,
                            method: 'POST',
                            type: 'POST',
                            dataType: 'json',
                            data: dataArr,
                            success: function (resp) {
                                var status = (resp.hasOwnProperty('status') ? resp.status : false);
                                if (status) {
                                    servicesCheckedLabels.addClass((resp.hasOwnProperty('approve') ? 'approve' : 'reject'));
                                    if (services.find('input[type="checkbox"]:not(:checked)').length > 0)
                                        actionButtons.prop('disabled', false);
                                } else {
                                    actionButtons.prop('disabled', false);
                                    servicesChecked.prop('disabled', false);
                                    servicesCheckedLabels.removeClass('disabled');
                                    if (resp.hasOwnProperty('message'))
                                        alert(resp.message);
                                    else
                                        alert('Не удалось выполнить действие, попробуйте еще раз.');
                                }
                            },
                            error: function (resp) {
                                actionButtons.prop('disabled', false);
                                servicesChecked.prop('disabled', false);
                                servicesCheckedLabels.removeClass('disabled');
                                if (resp.hasOwnProperty('responseJSON') && resp.responseJSON.hasOwnProperty('message'))
                                    alert(resp.responseJSON.message);
                                else
                                    alert('Не удалось выполнить действие, попробуйте еще раз.');
                            }
                        });
                        return false;
                    }
                });

Comments

[ThunderCat]

1) Зачем здесь код? Он как-то относится к сути вопроса? Полезнее было бы показать хтмл списка.
2)

при выделении нескольких чекбоксов у обьектов ?

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

[Night386]

ThunderCat,

<div class="services">
                                {% if row.export_auto == -1 %}
                                <label class="service" for="auto-{{row.id}}">
                                    <input id="auto-{{row.id}}" type="checkbox" name="services[auto]" value="1">
                                    <span>auto</span>
                                </label>
                                {% endif %}
                                {% if row.export_auto1 == -1 %}
                                <label class="service" for="auto1-{{row.id}}">
                                    <input id="auto1-{{row.id}}" type="checkbox" name="services[auto1]" value="1">
                                    <span>auto1</span>
                                </label>
                                {% endif %}
                                {% if row.export_auto3 == -1 %}
                                <label class="service" for="auto3-{{row.id}}">
                                    <input id="auto3-{{row.id}}" type="checkbox" name="services[auto3]" value="1">
                                    <span>auto3</span>
                                </label>
                                {% endif %}
                            </div>

Answer 1

[Ольга]

1. непонятно что за конструкция с чекбоксами и где там рядом с ними кнопки

2. раз уж используете jquery - то пользуйтесь им и классами, вот это все
if (e.hasOwnProperty('target') && e.target.localName && (e.target.localName === 'button')) {
достаточно заменить на
if($(this).hasClass('item-action-button'))

3. допустим,существует какая-то общая кнопка,по нажатию на которую собираются все отмеченные чекбоксы и что-то с ними делается:

let inputs=$('input[type="checkbox"]:checked',services);//находим чекбоксы
if(inputs.length){
  let data=[];
  let i=0;
  inputs.each(function(){
    data[i]=$(this).val();//собираем данные
  });
  //что-то делаем с данными
}

Answer 2

[ThunderCat]

$(".check_all").on('click', function (e){
   e.preventDefault();
   $(".services input[type='checkbox']").prop( "checked", true );
   alert ("я сделяль!");
});

Если охота морочиться с "несколько чекбоксов" - на чекбоксы вешаете обработчик ончейнж, считаете сколько чеканых, в зависимости от количества скрываете/показываете кнопку.