uncheck: function(checkedName) {
this.checkedNames = this.checkedNames.filter(name => name !== checkedName);
},
uncheckall: function(event) {
this.checkedNames = [];
},
checkedInput(event) {
if (this.checkedNames.includes(event.target.value)) {
this.uncheck(event.target.value)
} else {
this.checkedNames.push(event.target.value)
}
},<div class="checkbox-alignment-form-filter">
<input type="checkbox" id="H11" class="vh-product" value="1" v-model="checkboxes[0]" @click="checkedInput" />
<label class="productlist-specific" for="HR1">H1</label
>
</div>
<div class="checkbox-alignment-form-filter2">
<input
type="checkbox"
id="E0A"
class="vh-product"
v-model="checkboxes[1]"
value="E0A"
@click="checkedInput"
/>
<label class="productlist-specific" for="E0A">E0A</label>
</div>
</div>
<li @mouseover="mouseOver" @mouseleave="mouseOut" @click="uncheck(checkedName)" class="filtersapplied-productlist2" v-for="checkedName in checkedNames" :key="checkedName">
{{ checkedName }}
<span class="filtertag-plp" v-show="close" aria-hidden="true">×</span
>
</li>
<li
class="filtersapplied-productlist4"
@mouseover="mouseOver"
@mouseleave="mouseOut"
@click="uncheckall"
v-show="checkedNames != ''"
>
CLEAR ALL
</li>Having difficulty in deselecting the selected checkbox labels. The selected label displays properly but clearing all checkboxes using the "Clear All" option does not work as expected.
Not sure where the issue lies, whether it's in the checkedInput method or in the list item where a specific ID needs to be passed for clearing.
This code is based on a reference I found, however, after some modifications, the desired functionality is not achieved. Reference: https://jsfiddle.net/8xom729c/