Jquery remove attribute on click

Design help Custom code
1

Hello, I’m trying to remove the attribute of Checked when a link block is clicked but I’m not sure what’s wrong. below is the code:

These are the checkboxes I’m targeting to remove the checked state:

image
image961×101 14.9 KB

Here is my site Read-Only: Webflow - TGD Website

2

@Steven_Joel - so it looks like on the click of an element with the class button-link you want to remove the checked attribute from any element with the class of top-filter_button is that correct?

Since there are multiple elements with the top-filter_button class you need to use an iterator, with jQuery use the .each method.

So:

<script>
$('.button-link').on('click', function() {
  $('top-filter_button').each(function() {
    $(this).prop('checked', false); 
  }
});
</script>
3

thank you @sam-g I Included the code but somehow on the published site the buttons still stay styled when I press the “Clear All” button.

4

@Steven_Joel - so it looks like you have other Javascript that is adding classes to the a div within the label.

This is the code before clicking on the filter button:

<label class="w-checkbox top-filter_check-field">
<div class="w-checkbox-input w-checkbox-input--inputType-custom top-filter_button"></div>
<input type="checkbox" id="checkbox-3" name="checkbox-3" data-name="Checkbox 3" fs-mirrorclick-element="trigger-2" style="opacity:0;position:absolute;z-index:-1">
<span class="top-filter_check-label w-form-label" for="checkbox-3">Vape Carts</span>
</label>

And the code after clicking the filter button:

<label class="w-checkbox top-filter_check-field">
<div class="w-checkbox-input w-checkbox-input--inputType-custom top-filter_button w--redirected-checked"></div>
<input type="checkbox" id="checkbox-3" name="checkbox-3" data-name="Checkbox 3" fs-mirrorclick-element="trigger-2" style="opacity:0;position:absolute;z-index:-1">
<span class="top-filter_check-label w-form-label" for="checkbox-3">Vape Carts</span>
</label>

The only difference is the addition of the w--redirected-checked class to the div. This class is what adds the green background to the filter button.

You still want to remove the checked property from the checkbox, but doing that via Javascript doesn’t seem to be triggering the original script to remove the class like it does when the user actually clicks the button.

Try this code:

<script>
$('.button-link').on('click', function() {
  $('top-filter_button').each(function() {
    $(this).prop('checked', false); 
    $(this).removeClass('w--redirected-checked');
  }
});
</script>
5

that seems like a webflow class. I used the new code but it still does not remove the styling on it weird.

6

@Steven_Joel whoops, there is a syntax error:

image

You need another paren in there, like this:

<script>
$('.button-link').on('click', function() {
  $('top-filter_button').each(function() {
    $(this).prop('checked', false); 
    $(this).removeClass('w--redirected-checked');
  })
});
</script>
7

@Steven_Joel - one more change, based on the html structure we need to change some of these targets and remove the . in the class target for the click event.

<script>
$('button-link').on('click', function() {
  $('top-filter_button').each(function() {
    $(this).removeClass('w--redirected-checked');
  });
  $('input[name="checkbox-3"]').each(function() {
    $(this).prop('checked', false); 
  });
});
</script>

Give that a shot.

9

Hi @Steven_Joel,

Would you be able to try this?

<script>
$('.button-link').on('click', function() {
  $('.top-filter_button').each(function() {
    $(this).removeClass('w--redirected-checked');
  });
});
</script>

There was just a tiny bit of syntax error in @sam-g’s last reply but his code should do the trick.

10

it works!! thank you @mww and @sam-g for your help!!