calculate percentage in progressbar by checkbox

learningmode 0
Viewed 28

I have one checkbox field and a text field. In handleInputValueChanged function i need to calculate total no of fields which has a value basically not null. like below i have two fields the output should come as 50% if i fill one field and 100% if i fill both the fields. I cant query the fields uing names and these fields will be created dynamically by API response.

The issue which i am facing is querySelectorAll is working for all inputs with type text, but with checkbox field is not working.so i this case the function is returning zero if i check the checkbox field.

this.template.querySelectorAll('lightning-input')

<template>
<lightning-input type="checkbox" label="Enter value" onchange={handlecheckboxchange}>
    </lightning-input>
  
  <lightning-input  type="text" label="Enter value" onchange={handlecheckboxchange}>
    </lightning-input>
</template>

handleInputValueChanged() {
  let count = [...this.template.querySelectorAll('lightning-input')]
    .reduce((p, v) => (p + (v.value !== '' ? 1 : 0)), 0);
  let val = ((count / 2) * 100).toFixed(0);
}
salesforce-lightning javascript
1 Answers

If you give the checkbox value="1" attribute, does it help? Otherwise, do a special case for checkbox element.

handleInputValueChanged() {
  let count = [...this.template.querySelectorAll('lightning-input')]
    .reduce((p, v) => (p + ((v.getAttribute('type') === 'checkbox' && v.checked || v.value !== '') ? 1 : 0)), 0);
  let val = ((count / 2) * 100).toFixed(0);
}
IT goldman0
Related