Discover the title of the selected checkbox

Looking for some help with a tricky problem I've encountered.

I have created a script that identifies labels with a 'selected' class on their parent element, clones them, and appends them to an active list to create a 'Filtered Items' list.

My goal is to include the title of each section that the label belongs to in the text of the label itself. For example, if a label is selected from the 'Size' section, I want it to read 'Size: S', and if it's from the 'Color' section, it should show 'Color: Blue'. Currently, I am able to retrieve all the titles but struggling to filter it down to the correct section.

javascriptjqueryhtmlcss

Answer №1

var filterItem = '.m-refinement-item',
  filterItemClick = filterItem + ' .js-button-apply';

function swipeyFilterBtns() {
  $(".content-stuff").before("<section class='swipeySizeFilter'></section>");

  var index = 1;
  var text_val = $('.m-refinement-item').find('.js-refinement-name').text();

  console.log(text_val);

  $(filterItem)
    .find('.selected label')
    .clone()
    .wrapInner('<span class="swipeyLabelText">' + text_val + ': </span>')
    .appendTo($('.swipeySizeFilter'));

  $('.swipeySizeFilter label').each(function() {
    $(this)
      .addClass('swipeyFilterLabel')
      .attr('data-position', index);
    index++;
  });
}

function swipeyFilterClicky() {
  $(".swipeyFilterLabel").click(
    function() {
      setTimeout(function() {
        $(".js-overlay.js-mobile-overlay.m-refine-by-button").click();
        $(filterItemClick).click();
        $(".js-apply-refinements").click();
      }, 400);
    });
}
// More functions go here

$(document).ready(function() {
  if ($('.selected').length >= 1) {
    swipeyFilterBtns();
    swipeyFilterClicky();
    // Call other functions here
  }
});
@media only screen and (min-width: 767px) {
  /* Custom CSS styles */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="content-stuff"></div>
<div class="js-refinement-mobile-table m-refinement-wrapper m-overlay">
  <div class="m-refinement-header">
    Refine by
  </div>
  // More HTML content goes here
</div>

Answer №2

I believe this solution will meet your needs

$('.input-checkbox').on('click', function(item){
    if(document.getElementById($(this).attr('id')).checked && !$('.swipeySizeFilter label#active-'+ $(this).attr('data-value')).length){

        $('.swipeySizeFilter').append('<label for="'+ $(this).attr('data-value') + '" id= "active-'+$(this).attr('data-value') + '" class="swipeyFilterLabel NickTester swipeyFilterBtnActive"><span class="swipeyLabelText">' + $(this).attr('data-value') +'</span></label>')

    }
})

Also, remember to assign an id to all pre-selected checkbox as active-{id}

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

Exploring the magic of VueJS: Implementing computed properties for "set/get" functionalities in tandem with Vue.Draggable and

Currently, I am in need of assistance with utilizing "Vue.Draggable". For the past two days, I have been struggling to properly update the draggable array. The main challenge lies in: Updating the draggable array using computed set/get functions Obtaini ...

javascriptvue.jsvuejs2vuexvue.draggable

What steps are involved in implementing an ordering system on a restaurant's website using React?

As I work on developing my portfolio using React, I'm interested in incorporating an online ordering feature. However, the information I have found through Google so far hasn't fully addressed my questions. Can anyone provide guidance on the best ...

javascripthtmlreactjse-commerce

What is the reason that elements with % properties totaling 100% do not align next to each other?

I've been attempting to arrange two blocks side by side within another block, but they just don't seem to fit together smoothly. What could be causing this issue? .container {height: 200px; width: 400px; background:darkgrey;} .left {height: 100% ...

htmlcss

Error: The function window.intlTelInput is not recognized within the ReactJS framework

I am currently learning ReactJS and encountering an issue when using jQuery with React JS for intlTelInput. I have installed npm jQuery and imported all the necessary code. Additionally, I have included all the required CSS and jQuery links in my index.htm ...

javascripthtmljquerycssreactjs

Is it possible to render a web page in C++ that includes JavaScript, dynamic html, and retrieve the generated DOM string?

Is there a way to fetch and extract the rendered DOM of a web page using C++? I'm not just talking about the basic HTTP response, but the actual DOM structure that is generated after JavaScript has executed (possibly after allowing it some time to run ...

javascriptc++ajaxdomweb

Using only HTML and CSS, part of the text should transition in a Carousel without the use of JavaScript or jQuery

Looking to create a Carousel with changing text at a fixed interval, focusing on topics like mobile IoT application development and transport products. Currently utilizing the Aurelia framework. $('#carouselExampleSlidesOnly').carousel({ int ...

jqueryhtmlcsscarouselaurelia

Utilizing LocalStorage in an Ionic application to store data on a $scope

Having trouble saving the array named $scope.tasks to LocalStorage while building a To Do List app. Tried multiple times but can't figure it out. Here's the code, appreciate any help :^) index.html <!DOCTYPE html> <html> <head& ...

javascripthtmlangularjscordovaionic-framework

Exploring the power of AngularJS through nested directives

Index.html: <nav-wrapper title="Email Test"> <nav-elem value="first"></nav-elem> <nav-elem value="second"></nav-elem> </nav-wrapper> app.js: app.directive('navWrapper', function() { return { ...

javascripthtmlangularjsnesteddirective

Is it possible to drag the div container in HTML to resize its width from both left to right and right to left?

After posing my initial inquiry, I have devised a resizing function that allows for the expansion of a div's width. When pulling the right edge of the div to resize its width from left to right, is it possible to adjust the direction or how to resize ...

javascripthtmlcssangulartypescript

What is the best method for organizing data in rows and columns?

I attempted to use my map function to iterate over the data and display it, but I struggled to format it into rows and columns. The requirement is for 5 fixed columns with dynamically changing rows, making array indexing impractical. Here is the code snip ...

javascripthtmlcssreactjstailwind-css

Issue with Firebase Auth: Property 'auth' is undefined and cannot be read

I've been on a quest for answers everywhere to resolve this error. Strangely, my code was functioning perfectly fine last week but is facing issues today. I am trying to utilize Firebase auth to set up a sign-up page for my app, but I constantly encou ...

javascriptreactjsfirebasereact-native

What is the best way to ensure my header element is positioned above my h2 element on the webpage?

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script> <div id="page-wrapper"> <header id="header"> Hoppity Edits <div class="logo"> <im ...

htmlcss

AutoComplete feature activates when I choose a suggestion from the dropdown menu

<Autocomplete disablePortal id="geo-select-country" options={all_country} defaultValue={nation} onChange={(event, selected_nation) => { set_nation(selected_nation); }} ...

javascriptreactjsautocompletematerial-uitextfield

"Are you experiencing issues with the Ajax Success function not getting triggered upon returning from the Controller

Can anyone help me with my jQuery code? Here it is: $("#create").click(function(e) { var myModel = { "TribeName": $('#TribeName').val() }; var jsonToPost = JSON.stringify(myModel); $.aja ...

jqueryjsonajaxasp.net-mvc

How can Node.js handle an upgrade request effectively?

Dealing with a websocket 'upgrade' event from a Node.js http server presents an interesting challenge - The upgrade handler takes the form of function(req, socket, head) - Is there a method to respond to this upgrade request without access to a r ...

javascriptnode.jshttp

Error encountered while running script across PHP pages

I have encountered an issue with the following code snippet. It runs perfectly fine in my initial PHP file, but when I attempt to use it in another file, the script does not seem to work as expected. Specifically, I do not receive any alert message from ...

javascriptjqueryposthttpresponse

Tips for successfully passing an image using props in Vuejs without experiencing the issue of disappearing content when there is no image present

Is there a way to make a component that can function with or without an image? Currently, when the component doesn't have an image, other contents and styles disappear. How can I resolve this issue? App.Vue: <template> <div id="app&qu ...

htmlcssvue.js

Vertical Alignment Challenge in Bootstrap Container

I'm struggling with formatting my simple website. I have a navbar, footer, and a centered container where I want to display text and buttons. However, I can't seem to get the elements to appear on separate lines - I want the text on one line and ...

htmlcssbootstrap-4

JavaScript XML Serialization: Transforming Data into Strings

When trying to consume XML in an Express server using express-xml-bodyparser, the resulting object is not very useful. This is the XML: <SubClass code="A07.0"/> <SubClass code="A07.1"/> <SubClass code="A07.2"/> <SubClass code="A07.3" ...

javascriptjsonxmlexpress

individualized django models field for each user

Is it possible to create a boolean field in the post model to track if a user has liked a post? This field should only be changed by the respective user and not affect others. For example, if user 1 likes a post, it should show as true only for that user ...

javascriptpythonreactjsdjangodjango-channels