jQuery addClass example

Change class name on click in jQuery

by Roland

HTML

<div>
  <p>
    The list of attributes is set on previous pages in a Gravity Forms Survey field.
  </p>
  <p>
    Points left to distribute: <span id="points">10</span>.
  </p>
  <div class='group'>
    <div>
      <input type="text" value="0" /> Attribute 1
    </div>
    <div>
      <input type="text" value="0" /> Attribute 2
    </div>
    <div>
      <input type="text" value="0" /> Attribute 3
    </div>
    <div>
      <input type="text" value="0" /> Attribute 4
    </div>
    <div>
      <input type="text" value="0" /> Attribute 5
    </div>
    <div>
      <input type="text" value="0" /> Attribute 6
    </div>
  </div>
  <p>
    Current sum is: <span id="sum">0</span>.
  </p>
  <ol class="validation">
    <li>The sum needs to be exactly <strong>10</strong>.</li>
  </ol>
</div>

CSS

.group input { max-width: 10px; }

JavaScript

$(document).ready(function() {
	let max_sum = 10;
  
  $('.group input').change(function() {
  	console.log('Value changed for input: ' + $(this).val());
    let sum = 0;
    $('.group input').each(function() {
    	sum += Number($(this).val());
    });
    $('#points').html(max_sum - sum);
    $('#sum').html(sum);
    if (sum > max_sum) {
    	alert ('You cannot distribute more than ' + max_sum + ' points.');
    }
  });
});