Observe changes in multiple standard checkboxes

[rhenkin]

Hi,

Which approach would you recommend to retrieve values of multiple checkboxes? I'm using my own set of checkboxes in a custom JSX component, so I'm neither using the Inputs.checkbox nor a simple inline HTML. Looking at the Reactivity docs it looks like I might want to use a Generator, but I'm 100% sure about how to combine it with multiple elements using a selector (e.g. document.querySelectorAll('input[name="mycheckbox"]')). I attempted to adapt the code but it doesn't quite work (only if I do npm run dev and then change a file so it reloads). I'm attaching a .md with a simplified version of the component and data. I'm also happy to hear suggestions about how to include a delay here too if possible.

Thanks!
Rafael

example_obs.md

[Fil]

Unless I'm mistaken, I don't think we support view in jsx code blocks at this point. We should probably change this into a feature request.

[rhenkin]

No worries, do you think it would be possible instead to use a button to collect the values of checked inputs (always with the idea of using those values reactively)?

[Fil]

I'd recommend using Inputs.checkbox:

const checkboxValues = view(Inputs.checkbox(new Map(
  example_data.map(({name, value}) => [name, value])
  ), {label: "choose"}));

Using a button to collect a complete form is also possible.

[rhenkin]

Thanks. Not sure if it's the correct (optimal?) method but it seems that a Mutable object does the trick:

const checkedValues = Mutable([]);
const updateValues = () => 
{
  const checkboxes = document.querySelectorAll(`input[name="mycheckbox"]:checked`);
  
  if (checkboxes.length > 0) {    
    checkedValues.value = Array.from(checkboxes).map(checkbox => checkbox.value);
   }
}

Then elsewhere:

Inputs.button([["Update", updateValues]])

[Fil]

note that document.querySelectorAll will not match anything if it runs before your jsx code… so maybe make the dependency explicit