JSFiddle - React, Tailwind, and code Playground

by gs3166

HTML

<form action="" method="POST">
       <dl>
				<dt>
					<label for="body">body</label>
				</dt>
				<dd>
					<ul>
						<li><input type="radio" class="sum" id="body" name="body" value="1000" />
							<label>st-1000</label>
						</li>
						<li><input type="radio" class="sum" id="body" name="body" value="2000" />
							<label>tele-2000</label>
						</li>
					</ul>
								</dd>
			</dl>
			<dl>
				<dt>
					<label for="neck">neck</label>
				</dt>
				<dd>
					<ul>
						<li><input type="radio" class="sum" id="neck" name="neck" value="1000" />
							<label>maple - 1000</label>
						</li>
						<li><input type="radio" class="sum" id="neck" name="neck" value="2000" />
							<label>maho - 2000</label>
						</li>
					</ul>
								</dd>
			</dl>
    
    <input type="text" name="text" id="text">  
</form>

JavaScript

$(function() {
    var calc = function() {
          var sum = 0;
          fields.each(function() {
              var el = $(this),
                  type = el.attr("type");

              if ((type == "text") || (type == "radio" && el.attr("checked"))) {
                  sum += parseInt($(this).val(), 10) || 0;
              }
              $('#text').val(sum);

          });//end each
        },//end calc

        fields = $(".sum");

    fields.change(calc);
});