JSFiddle - React, Tailwind, and code Playground

HTML

<fieldset align="left" style="width:300px">
  <legend>Langs?</legend>
  <input type="checkbox" name="lan" value="1"> lang1 <br>
  <input type="checkbox" name="lan" value="200"> lang2 <br>
  <input type="checkbox" name="lan" value="400"> lang3 <br>
  <input type="checkbox" name="lan" value="600"> lang4 <br>
  <input type="checkbox" name="lan" value="800"> lang5 <br>
  <input type="checkbox" name="lan" value="1000"> lang6 <br>
  <input type="text" name="output1" size=10>
  <input type="button" value="Sum" onClick="grand()">
  <input type="reset" value="Reset">
</fieldset>

JavaScript

$('[type="checkbox"]').on('change', function() {

  $('[type="text"]').val(
  	$(this).parent().find('[type="checkbox"]:checked').length
  )
})