I have a form with three checkboxes. One of those checkboxes starts as checked. For the other two, I want a script to uncheck one if another is checked (works similar to a radio button, with the difference that I can uncheck all of them).
The problem
I want those three checkboxes to style differently than Webflow’s standard. For that, I choose Custom in the settings panel. But the script for checking/unchecking stops working whenever I do it. It only works when the Default style is applied.
Has anyone encountered this problem?
My script is below. But I tried it with other scripts I found, and the problem persists.
The script targets the checkboxes by the Name attribute (data-name). For checkboxes 2 & 3 it’s the same; checkbox 1. has a different one because I want to split those into two groups.
<script>
var last;
document.addEventListener('input',(e)=>{
var closest=e.target.closest("*[data-name='check']");
if(e.target.closest("*[data-name]")){
if(last)
last.checked=false;
}
if(e.target!==last)
last=e.target;
else
last=undefined;
})
</script>
hi @PiotrDk IMO you are overcomplicating task as you need to check many stages between A and B:
check if A and/or B is selected (init state)
if A or B selected store its state
when B is selected check state of A
a. if A selected set a new state of A to checked = false
b. if A is not selected return.
etc.
Why you just do not disable checkbox that should not be selectable? As you have mentioned you would like to have 2 groups. In one will be single checkbox so nothing there need to be done and in second group you have 2 checkboxes.
In this second group client can chose only one and when one is selected second is disabled. This is IMO easier solution.
check if A and/or B is selected (init state)
if A is selected set B to disable = true
when deselect A set for all disable = false
It is only my opinion how this task can be solved.
your solution is certainly an elegant one and works like a charm. Thanks for the code!
I have a follow-up question if you don’t mind.
The next step with these checkboxes is to add values to them so I can calculate the total values of all checkboxes. For that, I use Finsweet’s price calculator (hack42)
However, the trouble is that even if one checkbox is disabled (when another is selected), the value of that disabled checkbox is still being counted.
I assume it’s on Finsweet’s code part. But if you have a hint on how to solve that, that’d be cool.
I’ll try to post this question to them directly too.
Here’s the hack42 code:
<script data-info="hacks-body">
// on each checkbox click
$('.hack42-checkbox-label').click(function(){
// get the total value field
const $totalVal = $('.hack42-added-value'),
// get the checkbox input field
$checkbox = $(this).prev();
// declare sum variable
let sum;
// if user checks the checkbox
if(!$checkbox.is(':checked')){
// the sum is equal to the total value field's value
// plus the checkbox's value
sum = Number($totalVal.text().replace(/[\$,]/g,'')) + Number($checkbox.attr('add-value'));
}
else{ // if user unchecks the checkbox
// the sum is equal to the total value field's value
// minus the checkbox's value
sum = Number($totalVal.text().replace(/[\$,]/g,'')) - Number($checkbox.attr('add-value'));
}
// format sum e.g. 3500 to 3,500
const formattedSum = new Intl.NumberFormat().format(sum);
// display the sum
// NB: use sum directly if not interested in formatting
// $totalVal.text(sum);
$totalVal.text(formattedSum);
// add the sum value to the hidden input
$('.hack42-send-value').val(formattedSum);
});
</script>
hi @PiotrDk here is link to new version with calc. Take is as starting point as I didn’t spend much time on it and here still space to add another conditions like disable g2 if g1 is not checked etc…
Good luck
EDIT: I have add these another conditions. As code is getting more complex I will probably refactor code to be more readable.
