Converting a list to a checkbox list using JQuery with just a few tweaks

Currently, I have a group of elements that can be sorted with a text:

How can I easily convert this group into a list of checkboxes with labels with minimal code adjustments?

Original Code:

<div class='left'>
<ul id="sortable">
    <li class="ui-state-highlight"></li>
    <li class="ui-state-highlight"></li>
    <li class="ui-state-highlight"></li>
</ul>
</div>

Script

<script>
     $(function() {
         $( "#sortable" ).sortable({
           items: "li:not(.ui-state-highlight)",
           placeholder: "ui-state-highlight"
         });
         $( "#sortable" ).disableSelection();
     });
   </script>

Javascript

 var nodes = document.getElementById('sortable').getElementsByClassName('ui-state-highlight');  
      if (nodes.length > 0)
      {
        nodes[0].innerHTML = getSymbol();
        nodes[0].setAttribute("class", "ui-state-default");
      }

Answer №1

Snippet

<script type="text/javascript">
    $(document).ready(function() {
        $('#btnSave').click(function() {
            addCheckbox($('#txtName').val());
        });
    });

function addCheckbox(name) {
       var container = $('#cblist');
       var inputs = container.find('input');
       var id = inputs.length+1;

       var html = '<input type="checkbox" class="keepSymbol" id="cb'+id+'" value="'+name+'" onclick="checkboxClick(this)" checked="true" /> <label for="cb'+id+'">'+name+'</label>';
       container.append($(html));
    }
    </script>

Javscript

 var nodes = document.getElementById('cblist').getElementsByClassName('keepSymbol');
      if (nodes.length > 0)
      {
        addCheckbox(getSymbol());
      }
      else
      {
        return; // no more space
      }

This serves as a practical demonstration. Feel free to experiment with it to meet your requirements.

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

Localhost Delay in XAMPP

As I work on developing my own website, I have opted to use XAMPP for hosting. After making modifications to the CSS, HTML files, and replacing the existing images with new ones in the designated folder, I encountered an issue. Despite restarting and re-i ...

Implementing the linking of a URL to an HTML hidden button that is dynamically displayed through a Javascript program

I'm currently developing a basic webpage that has a feature allowing users to download the final result as an image file in the last step. To achieve this, I've added a hidden HTML button for downloading the result image and used CSS to set its ...

Branding image from Bootstrap overlapped with a container situated below the navigation bar

I'm having trouble adding a 400 x 100 png logo as a Navbar Brand image in Bootstrap 5. The logo is appearing too large, and even when I try to resize it, it still overlaps the black container and text input box below the Navbar in desktop view. On mob ...

What could be causing my ajax request to not be successfully compiled?

I seem to be experiencing an issue with this part of my code. Despite trying multiple methods, it still isn't functioning correctly. What steps can I take to resolve this problem? $.ajax({ url: "https://corona-api.com/countries/BR", ...

Exploring the mechanics behind jQuery selectors

Currently, I'm working on the Interactive website: Push menu training exercise on codecademy. However, I am a bit confused about jquery selectors. Specifically, in the example provided below, why does the 'menu' html element require a ' ...

Boxes that expand to full width and appear to float on

I am dealing with a situation where I have a container that holds multiple child elements such as boxes or sections. <section> <div>Box 1</div> <div>Box 2</div> <div>Box 3</div> <div>Box 4< ...

The onblur event is triggering prior to the value being updated

There are two input fields within a <form> element. I am trying to retrieve the value of one input field (dpFin) once it has been changed. The issue is that when I attempt to get the new value inside the event using var endDt = document.getElementByI ...

Adjusting or cropping strokes in a JavaScript canvas

I am working with a transparent canvas size 200x200. The object is being drawn line by line on this canvas using the solid stroke method (lineTo()). I'm in need of making this object full-width either before or after ctx.stroke();. https://i.sstatic. ...

What steps do I need to take to activate the spell check function for an HTML text area?

Is it feasible to activate the spell check functionality in HTML text areas while utilizing ColdFusion? ...

The pre-loader is hidden behind the block content and navigation bar

I've encountered an issue with my preloader where it's loading in front of the <body> element but not in front of the site's <navbar> or the {% block content %}. The CSS snippet to increase the z-index of the preloader is as foll ...

Creating a sleek CSS animation for a slot machine effect: Ensuring it stops smoothly and at a specific time limit

I'm working on creating a CSS animation that mimics a slot machine, but I'm struggling to achieve a smooth transition. .scrollable { height: 150px; width: 150px; margin: 0 auto; padding: 0; background: #000; ...

Can someone please clarify how the nth-of-type selector functions?

I can't understand why the nth-of-type selector needs to be set to 2 instead of 1 for the first sibling of this type in the code. To see the code in action, check out this jsfiddle: https://jsfiddle.net/xj5hvn16/ If anyone could kindly provide an ex ...

Stable height with Internet Explorer 6

According to information found on davidwalsh, it is mentioned that in IE6, the container will continue to expand vertically even when a specific height is set. How can I establish a max-height in IE6 so that the container expands with its content until r ...

Connecting a picture to a web address using the <img class> tag

I'm facing a major issue with the "fade script" I added to my portfolio. It's designed to fade between thumbnails using jQuery and CSS, but it relies on 2 img classes that I can't seem to link properly. Basically, I want to link the image g ...

Alignment of Card Element at Bottom in Bootstrap 5

Hey there! I'm new to Bootstrap and I'm facing an issue where I want to position a button element at the bottom of a card, even when the body text is minimal. However, no matter what I try, the button does not end up in the bottom right corner as ...

How can I adjust two overlapping divs for proper display?

It seems like I have two divs overlapping on the same line. The layout appears fine on a PC but not on an iPad or mobile device. Can someone please review the code and point out any mistakes I might have made? The issue is with the content overlapping the ...

Adjust the Division's Width to be 20% of the Total Page Width Excluding Margins

https://i.sstatic.net/T0nKq.png I need to create a menu page with 5 equal columns, but I'm facing an issue with the layout. Here's my current CSS for the yellow divs: width:20%; height:100vh; background-color: yellow; display:inline-block; In ...

Tips for ensuring your background image is fully displayed and covers the entire size

My dilemma lies within the header div. My intention is to have it fully covered with a background image without any cropping. However, the current setup seems to be stretching and cutting off parts of the image. Here is my CSS code: .header { bor ...

Utilize JQuery scripting to input Checkbox values

Using this JQUERY code to populate data into an HTML table. The first time it displays checkbox values, but the next time it does not show the values that were shown the first time. See the JQUERY code below: $(document).ready(function(){ $('#det ...

Struggling with smoothly transitioning an image into view using CSS and JavaScript

I'm currently experimenting with creating a cool effect on my website where an image fades in and moves up as the user scrolls it into view. I've included the code I have so far below, but unfortunately, I keep getting a 404 error when trying to ...