List Selection Results, Checkboxes Selected

Starr Duskk
Starr Duskk used Ask the Experts™
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

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.)

Watch Question

Do more with

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

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


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


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

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

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


Open in new window

Most Valuable Expert 2017
Distinguished Expert 2018
Something like this
  <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 id="target"></ul>

Open in new window

$(function() {
  var cb = $('#source :checkbox');
  $('#source :checkbox').change(function() {
    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));

Open in new window

Working sample here
Starr DuskkASP.NET VB.NET Developer


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

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