How to summarize checkboxes and radio if value has text and numbers in attribute?

Question

JavaScript

It is necessary to summarize the values ​​​​and display online. Calculator type.
Here is an example of inputs:

<input type="checkbox" name="color[]" value="blue" [[!+fi.color:FormItIsChecked=`blue`]]  atr="10"> Blue 
<input type="checkbox" name="color[]" value="Red " [[!+fi.color:FormItIsChecked=`red`]]  atr="20"> Red 
<input type="checkbox" name="color[]" value="Green" [[!+fi.color:FormItIsChecked=`green`]]  atr="30" > Green

Answer 1

I think the example from the link will help you: webuchitel.ru/JavaScript/js_07.html#input and webuchitel.ru/JavaScript/js_13.html