List Selection Results, Checkboxes Selected

Starr Duskk
Starr Duskk used Ask the Experts™
on
I want a list of checkbox items. As the user selects the items, I want them to appear in a list on the right.

If possible, I want each item to have a point value and as they select them, it totals the points selected.

Is there anything quick out there I can use in javascript, or jquery, or even asp.net?

I don't want to use a database or anything fancy.

(It's for a game I host where players earn points, pick prizes and screenshot me their selected list so I can give them their prizes.)

thanks!
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Analyst Assistant
Commented:
Perhaps something like this.
<!DOCTYPE html>
<html>
<body>
<head>
<script>

var prizeDic = {'Prize 1':10, 'Prize 2':20, 'Prize 3':30};

window.onload=function(){

	const list = document.getElementById('prizes');
	var i = 0;
	
	Object.keys(prizeDic).forEach(function(obj){
		i++;
		const chk = document.createElement('input');
		chk.addEventListener( 'change', listprizes);
		
		chk.className = 'prize';
		chk.type  = 'checkbox';
		chk.id =obj;
		
		prizeDic[obj] = Math.floor(Math.random() * (100 - 10 + 1)) + 10;
		
		const lbl = document.createElement('span');
		lbl.innerHTML = obj+ '-' + prizeDic[obj] +' points</br>';
		list.appendChild(chk);
		list.appendChild(lbl);

	})
}

function listprizes(){
	
	const prizes = document.getElementsByClassName('prize');
	
	var totalPoints = 0;
	var prizelist = [];
	
	document.querySelectorAll('.prize').forEach(function(prize) {
		if(prize.checked) {
			totalPoints += prizeDic[prize.id];
			prizelist.push(prize.id);
		}
	});
	
	var result = document.getElementById('selectedprizes')
	var html= '';
	
	if(prizelist.length != 0){	
		
		prizelist.forEach(function(prize){
			html += prize + '</br>';
		})
		
		html += 'Total points: ' + totalPoints;
	} else {
		var html='No prizes selected';
	}
	result.innerHTML = html;
}
</script>

</head>
<div id='prizes'style='width: 45%; float:left; height:100px; margin:10px'>
</div>

<div id='selectedprizes' style='width: 50%; float:right; height:100px; margin:10px'>
No prizes selected
</div>


</body>
</html>

Open in new window

Most Valuable Expert 2017
Distinguished Expert 2018
Commented:
Something like this
HTML
  <div class="d-flex flex-row">
    <ul id="source" class="w-50">
      <li><input type="checkbox" name="points[]" value="10"> 10</li>
      <li><input type="checkbox" name="points[]" value="20"> 20</li>
      <li><input type="checkbox" name="points[]" value="30"> 30</li>
      <li><input type="checkbox" name="points[]" value="40"> 40</li>
      <li><input type="checkbox" name="points[]" value="50"> 50</li>
      <li><input type="checkbox" name="points[]" value="60"> 60</li>
    </ul>
    <ul id="target"></ul>
  </div>

Open in new window

jQuery
<script>
$(function() {
  var cb = $('#source :checkbox');
  $('#source :checkbox').change(function() {
    $('#target').empty();
    var total = 0;
    cb.each(function(i, e) {
      if (e.checked) {
        total += +e.value;
        $('#target').append($('<li>').html('Checkbox ' + i + ' with points ' + e.value));
      }
    });
    $('#target').append($('<li>').html('Total points ' + total));
  });
});
</script>

Open in new window

Working sample here
Starr DuskkASP.NET VB.NET Developer

Author

Commented:
Thanks!!! Very helpful!
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
You are welcome.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial