I’m trying to change the value of a text input based on multiple checkbox elements…
This is all part of a registration form for a sports club program (I don’t want any payments going through the site at this point in time so think of it more as a quote).
There are six checkboxes that resemble different program options, not all have the same cost value.
I then have a read-only #paymentDueInput which I would like to set the value of depending on what the user has selected (this should show the added cost of each program the user selects).
So what I assume I need is an onChange event that sets the value of #paymentDueInput when the user selects one or more of the checkboxes…
e.g. if they select “Coed, Spring & Summer 2021” the value would set to “$160.00” and if they select “Coed, Spring 2021” and “Mens, Spring & Summer 2021” the value would set to “$249.00” etc.
I have looked at .checked in the velo API reference but I’m not really sure how I would use that in the page code for so many variables without using an unnecessary amount of code and I’m not even sure where I’d start with that. I definitely have no idea where to begin with using math within the code!
I’d really appreciate any help, I have been stuck on this for a long time 
A small excerpt from my Filtering Engine here… (for CheckBoxGroups).
https://www.media-junkie.com/pflegeservice
let MEMboxes = []
//Check-Boxes -------------------------------------------------------------
$w('CheckboxGroup').onChange(async(event)=>{
selectedElementID = event.target.id
selectedINDEX = Number(event.target.id[event.target.id.length - 1])
// console.log(event.target.id)
// console.log("Selected-CB: " + selectedElementID)
// console.log("Selected-ID: " + selectedINDEX)
//Memory-saving
MEMcboxes[selectedINDEX-1] = await $w('#'+selectedElementID).value
console.log("SELECTED = ", MEMcboxes[selectedINDEX-1])
//Set CheckBox-MEMORY (Array)...
await local.setItem(CBoxes[(selectedINDEX-1)], MEMcboxes[(selectedINDEX-1)])
FILTER_ENGINE()
})
What you could need ist this part…
//Check-Boxes -------------------------------------------------------------
$w('CheckboxGroup').onChange((event)=>{
selectedElementID = event.target.id
selectedINDEX = Number(event.target.id[event.target.id.length - 1])
console.log("Target: ", event.target.id)
console.log("Selected-CB: " + selectedElementID)
console.log("Selected-ID: " + selectedINDEX)
})
Thank you for helping me out 
I haven’t used a checkboxGroup as I had to add individual checkboxes in order to fit the space correctly (unfortunately checkboxGroups have limited layout possibilities). How would I make this work for 6 individual checkboxes instead?
Change:
$w('CheckboxGroup').onChange((event)=>{
To:
$w('Checkbox').onChange((event)=>{
@russian-dima okay thank you. So just so I understand the code properly… Am I right in assuming that snippet will get the value of the checkbox and turn it into a number? How would I then add all selected checkbox values and set the calculated total as the #paymentDureInput value? Or is that totally wrong? haha
just to give some more context… this was my original attempt after reading a couple of forum posts:
//-------------------Set Payment Value------------------//
$w("#coedSpringCheckbox").onClick( (event) => {
let checkedOptions = [];
if ($w('#coedSpringCheckbox').checked)
checkedOptions.push('89.00');
if ($w('#coedSummerCheckbox').checked)
checkedOptions.push('89.00');
if ($w('#coedPackageCheckbox').checked)
checkedOptions.push('160.00');
if ($w('#mensSpringCheckbox').checked)
checkedOptions.push('89.00');
if ($w('#mensSummerCheckbox').checked)
checkedOptions.push('89.00');
if ($w('#mensPackageCheckbox').checked)
checkedOptions.push('160.00');
$w("#paymentDueInput").value === checkedOptions;
});
Which didn’t work at all, nothing happened.
So I tried putting in that snippet and I got the ‘selectedElementID’ not defined error
import wixData from 'wix-data';
$w.onReady(function () {
//-------------------Set Payment Value------------------//
//Check-Boxes -------------------------------------------------------------
$w('#coedSpringCheckbox').onChange((event)=>{
selectedElementID = event.target.id
selectedINDEX = Number(event.target.id[event.target.id.length - 1])
console.log("Target: ", event.target.id)
console.log("Selected-CB: " + selectedElementID)
console.log("Selected-ID: " + selectedINDEX)
})
In another attempt, I’ve done the following (but returned ‘cspringPrice’ is not defined & ‘csummerPrice’ is not defined errors on the last line of code):
export function coedSpringCheckbox_change(event, $w) {
if ($w('#coedSpringCheckbox').checked) {
let cspringPrice = Number($w('#coedSpringCheckbox').value);
} else {
let cspringPrice = Number(0.00);
}
if ($w('#coedSummerCheckbox').checked) {
let csummerPrice = Number($w('#coedSummerCheckbox').value);
} else {
let csummerPrice = Number(0.00);
}
$w('#paymentDueInput').text = String(cspringPrice + csummerPrice);
}
Okay , so I’ve actually nearly cracked this…
The following code is working to set the #paymentDueInput value but the “if” function for changing the value of the checkboxes doesn’t seem to be corresponding… It just goes with the “else” value on every occasion
(I checked this by changing the “else” values and it calculated and set the value correctly).
It as if the .onChange event isn’t returning that the checkbox is checked.
//-------------------Set Payment Value------------------//
if ($w('#coedSpringCheckbox').checked) {
$w('#coedSpringCheckbox').value = 89.00;
} else {
$w('#coedSpringCheckbox').value = 0.00;
}
let cspringPrice = Number($w('#coedSpringCheckbox').value);
if ($w('#coedSummerCheckbox').checked) {
$w('#coedSummerCheckbox').value = 89.00;
} else {
$w('#coedSummerCheckbox').value = 0.00;
}
let csummerPrice = Number($w('#coedSummerCheckbox').value);
if ($w('#coedPackageCheckbox').checked) {
$w('#coedPackageCheckbox').value = 160.00;
} else {
$w('#coedPackageCheckbox').value = 0.00;
}
let cpackPrice = Number($w('#coedPackageCheckbox').value);
$w("#coedSpringCheckbox").onChange( (event) => {
$w('#paymentDueInput').value = String("$" + (cspringPrice + csummerPrice + cpackPrice).toFixed(2));
});
import wixData from 'wix-data';
//-------------------Set Payment Value------------------//
$w.onReady(function () {
//Check-Boxes -------------------------------------------------------------
$w('Checkbox').onChange((event)=>{
let selectedElementID = event.target.id
let selectedINDEX = Number(event.target.id[event.target.id.length - 1])
console.log("Target: ", event.target.id)
console.log("Selected-CB: " + selectedElementID)
console.log("Selected-ID: " + selectedINDEX)
})
})
SOLVED:
Okay so it just took a little more patience and getting my brain going but I FINALLY got there by turning it into an async function followed by the .onChange events:
//-------------------Set Payment Value------------------//
async function setPaymentValue() {
if ($w('#coedSpringCheckbox').checked) {
$w('#coedSpringCheckbox').value = 89.00;
} else {
$w('#coedSpringCheckbox').value = 0.00;
}
let cspringPrice = Number($w('#coedSpringCheckbox').value);
if ($w('#coedSummerCheckbox').checked) {
$w('#coedSummerCheckbox').value = 89.00;
} else {
$w('#coedSummerCheckbox').value = 0.00;
}
let csummerPrice = Number($w('#coedSummerCheckbox').value);
if ($w('#coedPackageCheckbox').checked) {
$w('#coedPackageCheckbox').value = 160.00;
} else {
$w('#coedPackageCheckbox').value = 0.00;
}
let cpackPrice = Number($w('#coedPackageCheckbox').value);
$w('#paymentDueInput').value = String("$" + (cspringPrice + csummerPrice + cpackPrice).toFixed(2));
}
$w("#coedSpringCheckbox").onChange( (event) => setPaymentValue());
$w("#coedSummerCheckbox").onChange( (event) => setPaymentValue());
$w("#coedPackageCheckbox").onChange( (event) => setPaymentValue());
@russian-dima Thank you, I have it working now
1 Like
Hi Can you help me with the error where i am getting wrong
screenshot below
$w.onReady( function () {
$w( “#checkboxGroup1” ).value = “100” ;
$w( “#checkboxGroup2” ).value = “100” ;
$w( “#checkboxGroup1” ).onChange( (event, $w) => {
manageSum();
} );
$w( “#checkboxGroup2” ).onChange( (event, $w) => {
manageSum();
} );
});
function manageSum(){
var sum = 0 ;
if ($w( “#checkboxGroup1” ).checked) sum += Number($w( “#checkboxGroup1” ).value);
if ($w( “#checkboxGroup2” ).checked) sum += Number($w( “#checkboxGroup2” ).value);
$w( “#text141” ).text = “” +sum;
}
@lisamthorpe
You are welcome. Well done! That is the right way ----> never give up!
You could become a good coder! 
Hello Rajat, please open your own new post. I will take a look if i can help you.
And by the way —> use code-tags to show your code in a more comfortable way, like …
Ohhh look, i just copied your code above and wanted to show you how it should look like, when using code-tags —> but as you can see i got just a SHITTY-VIEW of code…
$w.onReady(function () { $w("#checkboxGroup1").value = "100"; $w("#checkboxGroup2").value = "100"; $w("#checkboxGroup1").onChange( (event, $w) => { manageSum(); } ); $w("#checkboxGroup2").onChange( (event, $w) => { manageSum(); } );});function manageSum(){var sum = 0;if ($w("#checkboxGroup1").checked) sum += Number($w("#checkboxGroup1").value); if ($w("#checkboxGroup2").checked) sum += Number($w("#checkboxGroup2").value); $w("#text141").text = ""+sum;}
This happens when i copy & paste a CODE-SNIPET which was not originaly created with “code-tags”
Normaly it should look like…
$w.onReady(function () {
$w("#checkboxGroup1").value = "100";
$w("#checkboxGroup2").value = "100";
$w("#checkboxGroup1").onChange( (event, $w) => {
manageSum();
} );
$w("#checkboxGroup2").onChange( (event, $w) => {
manageSum();
} );
});
function manageSum(){
var sum = 0;
if ($w("#checkboxGroup1").checked) sum += Number($w("#checkboxGroup1").value);
if ($w("#checkboxGroup2").checked) sum += Number($w("#checkboxGroup2").value);
$w("#text141").text = ""+sum;
}
That mens i would spend much more time with your issue, because i would first to rebuild the code to give it the right coding-structure → unnecassary waste of time, i hope you understood it
So please use —> Code-Tags in future, when you show your code.
@russian-dima Waiting for your revert as i am new and struggling from past 1 month for this thanks advance
