Filter dynamic Checkbox

<form id="formService_Cat" class="nav ">
<div class="form-group mb-3" is="dmx-checkbox-group" id="group1" dmx-bind:value="ServiceCategories.values('ID_Service_Category')">
  <div class="form-check radiowrap" dmx-repeat:servicescategory="ServiceCategories">
    <input class="form-check-input" type="checkbox" id="service_cat" name="service_cat" dmx-bind:value="ID_Service_Category" >
    <label class="form-check-label" for="service_cat">{{Service_Category}}</label>
  </div> </div> </form >

Hello,

I have been trying to filter the query using the checkbox above. I followed the tutorial online, but it is not working yet. Unless I add the dynamic event attributes. So, I added on-click event attributes to the form. It was working. However, when I click on the input, the entire page refresh, and the screen view starts at the beginning of the page.
I wanted to make sure the filter works - and the browser doesn’t start at the beginning of the page every time you click on the input form. And stay exactly where it has been clicked.

Thank you in advance,