Latest update of Calx is now support wider form element including checkbox, radio button and select-box, as previous version only support textbox. By default Calx will assume that unchecked radio button or unchecked checkbox have a 0 value untill you define the data-unchecked value

<input type="checkbox" id="A1" value="10" />

<!-- or -->

<input type="radio" id="A2" value="10" />

SUM Scenario with checkbox and radio button

If you have group of checkbox, and you need to calculate all it’s value, we can simply use SUM, and include all checkbox in the group. Since unchecked checkbox will be treated as 0, then x + 0 + 0 + 0 = x

<input id="A1" type="checkbox" value="200" /> HDD Baracuda 4TB <br />
<input id="A2" type="checkbox" value="120" /> LED Monitor BenQ 21 inch<br />
<input id="A3" type="checkbox" value="105" /> MotherBoard Gigabyte <br />
<input id="A4" type="checkbox" value="200" /> Intel Proc. i3 2328 <br />
<input id="A5" type="checkbox" value="200" /> LiteOn Optical Drive <br />

<span id="A6" data-format="$ 0,0
[.]00" data-formula="SUM($A1,$A5)"></span>

this scenario also apply to group of radio button, say we have 5 radio buttons with one of them is checked, so we can assume that 0 + 0 + x + 0 + 0 = x, where x is the value of checked radio button

<input id="A1" type="radio" name="item" value="200" /> HDD Baracuda 4TB <br />
<input id="A2" type="radio" name="item" value="120" /> LED Monitor BenQ 21"<br />
<input id="A3" type="radio" name="item" value="105" /> MotherBoard Gigabyte <br />
<input id="A4" type="radio" name="item" value="200" /> Intel Proc. i3 2328 <br />
<input id="A5" type="radio" name="item" value="200" /> LiteOn Optical Drive <br />

<span id="A6" data-format="$ 0,0[.]00" data-formula="SUM($A1,$A5)"></span>

but in some case where SUM scenario can’t be applied, and you need to have unchecked item to be treated as other than 0, this scenario can be achieved by adding data-uchecked attribute

<input id="A1" type="radio" name="test" value="15" data-unchecked="1" />
<input id="A2" type="radio" name="test" value="20" data-unchecked="1" />

above code will tells Calx to treat unchecked radio button as 1 instead of 0.

Working with select-box

Working with select box is much easier, as you only need to provide id attribute for the select element

<select id="A1" name="proc">
    <option value="15">1 Core</option>
    <option value="22">2 Core</option>
    <option value="30">4 Core</option>
</select>

<input id="A2" type="text" data-format="$ 0,0[.]00" data-formula="$A1" />

but unfortunately, multiple select is not supported yet by Calx, maybe next release πŸ˜‰