I'm not an expert on CSS, but do you need the span there? Another way to achieve this effect is a sheet worker, and checkbox inputs instead of radio, named something like "foo0, foo1, foo2, foo3, etc" each with a value of 1. If a check box is clicked, it clears all checked boxes with a higher value name, and fills all checkboxes with a lower value. Here's one way to do it. It might seem more complex than the CSS approach, but isnt dependent on any particular layout. // assuming you have checkboxes for values 0 to 5... on('change:foo0 change:foo1 change:foo2 change:foo3 change:foo4 change:foo5', function(event) { getAttrs(['foo0', 'foo1', 'foo2', 'foo3', 'foo4', 'foo5'], function(v) { // slice here gets the last 'letter' of the attribute that triggered the event - which is always a number from 0 to 5. const num = parseInt(event.sourceAttribute.slice(-1)) || 0; const max = 5; // the biggest number in the set. const output = {}; // this is for the setAttrs, we plan to send all the other checkboxes with a value of 0 or 1
for(let i = 0; i <= max; i++) {
if(i !== num) { // skip when num = i, because num is the attribute that was just changed manually. output[`foo${i}`] = (i < num) ? 1 : 0; // set everything below num to 1, and everything above to 0. } }; // now save the set of attribute values setAttrs(output,{silent: true}); // make sure the changing of attributes doesnt retrigger this sheet worker. }); });
