Custom checkbox - checking/unchecking with custom code

Hey Folks,

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>

image


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

hi @PiotrDk IMO you are overcomplicating task as you need to check many stages between A and B:

  1. check if A and/or B is selected (init state)
  2. if A or B selected store its state
  3. 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.

  1. check if A and/or B is selected (init state)
  2. if A is selected set B to disable = true
  3. when deselect A set for all disable = false

It is only my opinion how this task can be solved. :wink:

Here is example what i mean.

Hey @Stan

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.

Hi @Stan
that’s awesome. Thanks for your effort!

1 Like