0

I am trying to generate link on the button when multiple Checkbox is clicked based on the value. I have used the below link and it's working fine and I am able to generate link.

Create a dynamic link based on checkbox values

The issue is that when I select the checkbox for the first time it generates a link to /collections/all/blue+green but when I again select/deselect the different value its duplicates and ADDs the values with old Link → to collections/all/blue+green+blue+green

For Live Issue check on mobile View Click on filter on bottom => https://faaya-gifting.myshopify.com/collections/all 

$("input[type=checkbox]").on("change", function() {
  var arr = []
  $(":checkbox").each(function() {
    if ($(this).is(":checked")) {
      arr.push($(this).val())
    }
  })
  var vals = arr.join(",")
  var str = "http://example.com/?subject=Products&checked=" + vals
  console.log(str);

  if (vals.length > 0) {
    $('.link').html($('<a>', {
      href: str,
      text: str
    }));
  } else {
    $('.link').html('');
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<input type="checkbox" name="selected" value="Blue" class="products"> Blue<br>
<input type="checkbox" name="selected" value="Green" class="products"> Green<br>
<input type="checkbox" name="selected" value="Purple" class="products"> Purple
<br>
<span class="link"></span>

For Live Issue check on mobile View Click on filter on bottom => https://faaya-gifting.myshopify.com/collections/all

Anthony David
  • 11
  • 5

2 Answers2

0

I see what's going on now. What's causing the duplicate is actually multiple checkboxes having the checked value.

If you run this code in your console, you should see that you have twice of the item checked as its length:

// Run this in your browser console
$('input[type=checkbox]:checked').length

For example, if I have Wood and Metal checked and clicked Apply, running the code above gives length of 4 instead of just 2. Meaning, you have a duplicate checkbox input for each filter hidden somewhere in your code. I have verified this.

As options, you can:

  1. Try to remove the duplicate checkbox input – Best Option; or
  2. Add class to narrow down your selector to just one of the checkbox input containers.

Here's a screenshare of what's going on: https://www.loom.com/share/2f7880ec3435427a8378050c7bf6a6ea

UPDATED 2020/06/09: If there's actually no way to modify how your filters are displayed, or add classes to narrow things down, we can opt for an ad hoc solution which is to actually, just remove the duplicates:

  // get all your values
  var arr = []
  $(":checkbox").each(function() {
    if ($(this).is(":checked")) {
      arr.push($(this).val().toLowerCase())
    }
  })

  // removes duplicates
  var set = new Set(arr)

  // convert to array and join
  var vals = [...set].join(",")
Algef Almocera
  • 759
  • 1
  • 6
  • 9
  • Hey the issue is because I have hidden the section for mobile and made a separate section for Mobile Checkbox. Any idea how to make sure when i click on mobile its doesnt trigger on the desktop section. if this would work by narrowing down with class can you give me a exampl with my code Please – Anthony David Jun 08 '20 at 18:28
  • Hi @AnthonyDavid, edited my answer and added a solution you can try above. What it does is to simply remove the duplicates instead. – Algef Almocera Jun 08 '20 at 20:02
  • @AnthonyDavid the unchecking of the selected happens after you already clicked Apply. It happens even before the above fix was provided. I did encounter it. – Algef Almocera Jun 10 '20 at 22:08
0

I am bit bad in jquery. Am I doing right?

Should I just add the script which I have written below

$("input[type=checkbox]").on("change", function() {
  var arr = []
  $(":checkbox").each(function() {
    if ($(this).is(":checked")) {
      arr.push($(this).val().toLowerCase())
    }
  })

  // removes duplicates
  var set = new Set(arr)

  // convert to array and join
  var vals = [...set].join(",")
  var str = "http://example.com/?subject=Products&checked=" + vals
  console.log(str);

  if (vals.length > 0) {
    $('.link').html($('<a>', {
      href: str,
      text: str
    }));
  } else {
    $('.link').html('');
  }
})

Am I right?

Or should I add any values on var set = new Set(arr) or var vals = [...set]

Thank you for you help Algef

Anthony David
  • 11
  • 5
  • It looks good! You should try this out and let us know if it worked. – Algef Almocera Jun 09 '20 at 21:49
  • @AlgefAlmocera It works and Thank you soo much... Just a Quick Issue, now the tag doesn't duplicate but when I Re-click the Checkbox the tag doesn't get removed.... I mean to say tag adds properly but when i click it doesn't get removed now.... Once again thank you Soo Much – Anthony David Jun 10 '20 at 20:12
  • Ah, I did see that bug even before any change was done. Glad it helped. :) – Algef Almocera Jun 10 '20 at 22:05
  • hey @AlgefAlmocera can you help me with any script in removing the tag When re-clicked? Please ignore the Check 'Tick' which is not getting removed on reclick. – Anthony David Jun 11 '20 at 20:12
  • Thank you For you help @AlgefAlmocera – Anthony David Jun 15 '20 at 15:29