html jQuery选择多个项目

Posted 2021-05-11

$(document).ready(function() {
/**
 *  Script will create empty array ($arr) and
 *  based on user action (select/deselect), 
 *  it will add or remove item velues (in this case item velue is page ID) from the created array.
 *  It will also asign appropriate syles and classes to the selected items.
 *  Array ($arr) values (separated by ",") will be then asigned as delete button value in the form.
 *  After form submit we will have buttons $_POST values separated by comma.
 *  Then, in php form process, we can easily convert values seperated by "," to php array.
 *  eg: $array = explode(",", $_POST['delete_item']);
 *  And do what ever we want...
 *
 */
    
    /**
      *   Create empty array that will populate with values.
      *   We will add/remove values to this array and asign it to the delete form value.
      */
    var arr = new Array();
    
        /**
         *  Select Item
         */
        $(".item-select").click(function(event) {     
            // get clicked item id
            var item_id = $(this).val();
            // add item id to anrray if doesent exist
            if($.inArray(item_id, arr) !== 0) {
                arr.push(item_id);
            }
            // asign array to the form value
            $("#delete-item-id").val(arr);
            // do visuals
            $(this).parents(".uk-card").addClass('ivm-active');
            $(this).addClass('uk-hidden');
            $(this).next().removeClass('uk-hidden');

            // Show delete button if value is set
            var selected_items = $("#delete-item-id").val();
            if(selected_items != '') {
                $("#delete-button").removeClass('uk-hidden');
            }else {
                $("#delete-button").addClass('uk-hidden');
            }

        });
    
        /**
         *  Deselect Item
         */
        $(".item-deselect").click(function(event) {
            // remove this item from array
            var removeItem = $(this).val();
            arr = jQuery.grep(arr, function(value) {
              return value != removeItem;
            });
            // asign modified array to the form value
            $("#delete-item-id").val(arr);
            // do visuals
            $(this).parents(".uk-card").removeClass('ivm-active');
            $(this).addClass('uk-hidden');
            $(this).prev().removeClass('uk-hidden');

            // Show delete button if value is set
            var selected_items = $("#delete-item-id").val();
            if(selected_items != '') {
                $("#delete-button").removeClass('uk-hidden');
            }else {
                $("#delete-button").addClass('uk-hidden');
            }

        });
  
)};

<?php
/**
 *  Process submited form
 *
*/

// check if form is submited and if there is values to process
if(isset($_POST['delete_item']) && $_POST['delete_item'] != '') {
    
    /**
     *  Get items IDs that are asigned to "delete_item" button value 
     *  and store them as array in $array var
     */
    $array = explode(",", $_POST['delete_item']);
    
    /**
     *  This is page delete examample for processwire
     *  Loop true submited IDs, get pages with dose IDs and delete them.
     */
    foreach($array as $item) {
      
        // get processwire page
        $page_to_del = $pages->get($item);
        // delete page
        $page_to_del->delete(true);

    }

    // Set Notification  $_SESSION vars
    $_SESSION['show_note'] = '1';
    $_SESSION['note_status'] = 'success';
    $_SESSION['note'] = "Items has been deleted!";
    // redirect
    header("Location: $page->url");
    exit();
  
}

/**
 *  Display notification after process.
 *  In this case it's Uikit notification
 */
// check if notification $_SESSION is set
if(isset($_SESSION['show_note'])) {
    // echo notification
    echo ukNotification("top-center", "{$_SESSION['note_status']}", "{$_SESSION['note']}", "3000");
    // unset notification  $_SESSION vars after displaying it
    unset($_SESSION['show_note']);
    unset($_SESSION['note_status']);
    unset($_SESSION['note']);
}

<!-- ITEM -->
<div class="item">
    <!-- item select -->
    <button value="123" class="item-select">
        <i class="fa fa-trash"></i>
    </button>
    <!-- item deselect -->
    <button value="123" class="item-deselect">
         <i class="fa fa-close"></i>
    </button>
</div>

<!-- FORM -->
<form action="./" method="post">
    <!-- items IDs will be asigned to this field separated by "," -->
    <button id="delete-item-id" class="uk-button uk-button-danger" type="submit" name="delete_item">
        Delete
    </button>
</form>