"Exploring the option of using a fly-in feature to add multiple items with checkboxes in HTML

I need to implement a feature where I can select multiple items using checkboxes and retrieve them when a popup is closed. Here's what I want to achieve:

Is there a way to accomplish this?

Imagine I have a div with several items, and I want to display checkboxes on clicking the items. Upon closing the popup, I should be able to fetch the selected items.

<div id="div1" style="display:block;background-color:green">>
            <ul>
                <li>Item1</li>
                <li>Item1</li>
                <li>Item1</li>
                <li>Item1</li>
                <li>Item1</li>
                <li>Item1</li>
                <li>Item1</li>
                <li>Item1</li>
            </ul>
        </div>
jqueryhtmlcss

Answer №1

To achieve this functionality, you can handle li element clicks by toggling a class with a checked icon background.

var selectedItems = "";
$("ul").on("click", "li", function() {
    var $this = $(this);
    $this.toggleClass("selected");
    selectedItems = $this.parent().find("li.selected").map(function() {
        return this.innerText || this.textContent;
    }).get().join(',');    
});

You need to create CSS classes similar to these:

li {
  padding-left: 25px;
  cursor: pointer;
}

li.selected {
  background-image: url(http://www.pbsys.com.br/icon_checked.gif);
  background-repeat: no-repeat;
  background-position: 2px 3px;
}

Simply access the selected items by reading the selectedItems variable.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing D3.js to filter nodes and links by making multiple selections from a checkbox

I am interested in enhancing my current forced directed graph by adding more flexibility. You can access the Jsfiddle here. Currently, there are radio buttons that control the opacity of nodes and links. There are 4 types of nodes: Agent, Customer, Pho ...

javascriptjqueryhtmld3.js

Trouble getting a sticky element to align with a two-column grid within a parent container

I'm looking to keep one column sticky in a two-column grid setup. My goal is to create a vertical navigation bar that's specific to a particular div within a single-page site, with a fixed horizontal navbar across the entire page. However, I&apos ...

javascripthtmlcssbootstrap-4sticky

Introducing a fresh new feature incorporating various div elements through the power of JQuery

Why am I unable to retrieve the text of the newly added child divs? I am using JQuery to dynamically add these elements. Here is my sample fiddle: JSFIDDLE Could someone please guide me on what mistake I made? Javascript Code: var counter = 0; $("butto ...

jquerycssajaxdynamicelement

Can you please point out the location of the error in the Java Script code

Our application is developed using Yii2 framework and incorporates Kartik's star-rating widget. However, there seems to be an error in the JavaScript code: Error message from console: Check out the problematic code snippet: <?php $js = ...

javascriptjquery

In Vue.js, the 'select' option is consistently set as the default choice

Encountering an unusual issue with a select field in vue.js. Desired outcome: a select field with no default option selected. In regular html, this is easily achievable. Here is the jsfiddle Link: https://jsfiddle.net/odsf3awr/ <select id="test" s ...

javascripthtmlvue.js

Mastering the art of incorporating live JavaScript search functionality that updates in real-time as the user continues typing on the same

Trying to implement a JavaScript search feature to find a div within the same page. The current code being used for the search query display is: $('.form-search').on('submit',function(){return false;}); $('.form-search .btn') ...

javascripthtmlcss

During the for loop, a string variable with the prefix "undefined" is

I'm currently working with a drop-down menu where I use the .Change() function to trigger a specific action. This action involves obtaining data using the getJSON method and then creating an array string for an mp3 file based on that data. The code b ...

javascriptjquery

Grant the "User" the ability to modify both images and prices

I'm currently working on an art website for a relative and I am looking to provide them with the ability to log in and easily update the images of their paintings as well as adjust the pricing. Is it possible to enable this functionality? My assumptio ...

javascriptphphtml

jquery accordion failing to display content

Upon navigating to my website and accessing the webpage featuring an accordion, the accordion successfully appears and hides after 1500ms as intended. However, when attempting to reveal the text by clicking on the headings, nothing happens. The heading sim ...

javascriptjqueryhtmlcodeigniter

Showcase a picture within a row of a table using Ajax in an MVC framework

Getting straight to the point, I have a similar code snippet in my Controller: return base.File(getSomeImageBitmap, "image/jpeg"); This code successfully displays the image in a new window using @Html.ActionLink. However, I want the image to be directly ...

c#jqueryajaxasp.net-mvcrazor

Expand your dropdown options with a Popup Input feature in the ComboBox to seamlessly add a 'New Option'

Hello there! I am currently learning, so please be patient with me. Currently, I am in the process of developing a web application for a product management system. The company I work for purchases products from multiple vendors, both through wholesale and ...

javascripthtmlcomboboxwebformsdrop-down-menu

Searching Text Boxes with Javascript: A Better Way to Handle Arrays

I'm struggling to implement a feature where users can search for authors in a database and be redirected to the corresponding HTML if found. Otherwise, it should display a message saying "No Author Found"... I need some assistance in getting this fun ...

javascripthtmlarrays

Having trouble sending an object from a form using Ajax in SpringMVC

How can I send an object to a controller using jQuery's AJAX? I have defined the User object: private String name; private int age; public User(String name, int age) { this.name = name; this.age = age; } public String getName() { retur ...

javajqueryajaxspring-mvcspring-boot

The functionality of Breeze.js for saving changes fails unless the designated controller method is explicitly named as `SaveChanges()`

Hello, I am a beginner in BreezeJs I have a post method on my Controller // POST api/company/post [Authorize(Roles = "Admin")] [AcceptVerbs("POST")] [HttpPost] public object **SaveChanges**(JObject companyRequest) ...

c#jqueryasp.net-mvcentity-frameworkbreeze

Tips for submitting an AJAX response using a form

Steps Taken I have implemented an ajax call to retrieve checkboxes as follows: <script> $(document).ready(function(){ $("#place").change(function(){ var id = $(this).val(); alert(id); $.ajax({ ...

javascriptphpjquerymysqlajax

Utilizing HTML5 to Access and Update custom data attributes

I have implemented the following code: var activeFilter = $('<li></li>').data('input-id', 'mycustomId'); $('#container').append(activeFilter); Now, I am faced with the challenge of retrieving a specific ...

javascriptjqueryhtmljquery-data

Encountering an issue with importing external JavaScript files in the App.js file during React development

Currently, I am embarking on the development of a basic starter app that deals with SMTP anonymously in React. This project is primarily for educational purposes. Prior to diving into actual development work, I have decided to keep things simple and focus ...

javascripthtmlcssreactjs

.malfunctioning in Internet Explorer due to compatibility issues

While I have not personally experienced this issue, there seems to be a problem with a form on our website. After changing the value (using .change()), the field is supposed to update by sending data to save.php. However, some users have reported that this ...

jqueryajaxformsinternet-explorer

Improving CSS performance in React Styled Components

Which method is more efficient and why? I have heard that the css method in Styled-components can be resource-intensive. I am curious to know if using multiple nested ${(prop) => {}} functions is more costly compared to a single function with the css m ...

cssreactjsstyled-components

Linked selection options for state, city, and postal code

I have set up a cascading dropdown list - State -> City -> Pincode . Instead of fetching data from the database, I am using JSON. The dropdown functions smoothly on the local server, but experiences slowness on the web server. Here is a snippet of ...

javascriptjqueryhtmljson