Uncheck a checkbox if another checbox is checked

Ask the community
,
1

I have five (5) checkbox fields. I would like to make sure only one checkbox can be ticked and get the value of that checked checkbox.

2

Can someone help me on this? Thank you

3

Hey,
Lets say that you have 4 checkboxes, you can use the following code:

$w.onReady(function () {
	for(let i=1 ; i < 5; i++){
		$w(`#checkbox${i}`).onChange(()=>{
			const checkBoxes = ['checkbox1', 'checkbox2', 'checkbox3', 'checkbox4'];
			let filtered = checkBoxes.filter(item => item !== `checkbox${i}`);
			filtered.forEach((checkbox)=>{ $w(`#${checkbox}`).checked = false; });
		});
	}
});

However, I recommend using for that purpose radio buttons which have the same functionality…

Good luck,
Tal.

1 Like
4

then put onChange all the checkbox?

5

The function adds event handlers to all checkboxes already (this is why we use the for loop).

6

Hi Tal,

it’s not working on me

$w.onReady(function () {
	for(let i=1 ; i < 5; i++){
		$w(`#checkbox${i}`).onChange(()=>{
			const checkBoxes = ['yellowBox', 'greenBox', 'whiteBox', 'redBox', 'orangeBox'];
			let filtered = checkBoxes.filter(item => item !== `checkbox${i}`);
			filtered.forEach((checkbox)=>{ $w(`#${checkbox}`).checked = false; });
		});
	}
});

Here is my editor page —> https://editor.wix.com/html/editor/web/renderer/edit/e59190d7-a71b-4b09-a759-68b4282a2eb3?metaSiteId=f157fc7c-10d6-4ee0-b15c-4ce6e8e056dd&editorSessionId=FFE0F41E-3B1C-4D42-8FBE-CAA8857D8682&referralInfo=my-account

7

Hi Chloe,
in the code Tal sent you above, which was just an example, please pay attention specifically to this line here:

for (let i = 1; i < 6; i++){
  $w(`#checkbox${i}`).onChange

now $w selector used with ‘#’ means - look for an element in the page with such an id, to apply the on change on. you however do not have elements with such ids.
you have yellowBox, greenBox etc
you just need to modify the code to match the ids :wink:

like Tal, i also recommend you choose radio buttons. the difference between radio and checkboxes is single select vs multi select

good luck,
Shlomi

8

Hi Shlomi,
Thank you for the kind reply. I choose the check box because it is customizable, I want specific color and name for each checkbox.

I adjust my button Id’s, and change it to “checkbox, checkbox2, etc” to match the code but it still don’t change anything. still don’t do what I want.

$w.onReady(function () {
	for (let i = 1; i < 6; i++) {
		$w(`#checkbox${i}`).onChange(() => {
			const checkBoxes = ['checkbox', 'checkbox2', 'checkbox3', 'checkbox4', 'checkbox5'];
			let filtered = checkBoxes.filter(item => item !== `checkbox${i}`);
			filtered.forEach((checkbox) => {
				$w(`#${checkbox}`).checked = false;
			});
		});
	}
});

#checkbox, #checkbox2, #checkbox3, #checkbox4, #checkbox5

9

Hi,

the loop is from checkbox1 to checkbox6, i think you had an issue with the id of the first checkbox which was not called checkbox1

Shlomi

10

Hi Shlomi,

It’s now working! thank you!

11

Are you able to post your updated code Chleo? I am having similar issues and cannot alter my code to find the right solution.