Checkbox value storage

jmrker · 09-24-2012, 02:13 AM

'xelawho' had a short snippet of code
See post #3 of: http://www.codingforums.com/showthread.php?t=273928
that served a purpose for me in some other program. See 2 versions below.

Code:

<body>
<input type="checkbox" value="hi" onclick="addMess(this)"/><br>
<input type="checkbox" value="bye" onclick="addMess(this)"/><br>
<input type="checkbox" value="later" onclick="addMess(this)"/><br>
<input type="button" value="show me" onclick="alert(str)"/>
<script type = "text/javascript">
var str=""
function addMess(box){
str=box.checked?str+box.value+"\n":str.replace(box.value+"\n","");
}
</script>
</body>

Version 1 using string

Code:

<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8" />
<title> Untitled </title>
<style type="text/css">
 #fldFaculty { width:200px; }
</style>
</head>
<body>
<fieldset id="fldFaculty"><legend>Choose faculty to notify</legend>
<script type="text/javascript">
// Modified from: http://www.codingforums.com/newreply.php?do=newreply&p=1272610

var Faculty = ['John','Jacob','Jingle-Heimer','Smith'];
var str = '';
for (var i=0; i<Faculty.length; i++) {
  str += '<label><input type="checkbox" value="'+Faculty[i]+'" onclick="addMess(this)"/>'+Faculty[i]+'</label><br>';
}
document.write(str);  // create display

var FacultyList = "";
function addMess(box){
  FacultyList=box.checked?FacultyList+box.value+"\n":FacultyList.replace(box.value+"\n","");
}
</script>
</fieldset>

<input type="button" value="Show chosen" onclick="alert(FacultyList)"/>
</body>
</html>

Version 2 using array

Code:

<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8" />
<title> Untitled </title>
<style type="text/css">
 #fldFaculty { width:200px; }
</style>
</head>
<body>
<fieldset id="fldFaculty"><legend>Choose faculty to notify</legend>
<script type="text/javascript">
// Modified from: http://www.codingforums.com/newreply.php?do=newreply&p=1272610

var Faculty = ['John','Jacob','Jingle-Heimer','Smith'];
var str = '';
for (var i=0; i<Faculty.length; i++) {
  str += '<label><input type="checkbox" value="'+Faculty[i]+'" onclick="addMess(this)"/>'+Faculty[i]+'</label><br>';
}
document.write(str);  // create display

Array.prototype.inArray = function (value) {
// Returns position of match in array if found or -1 if not
  for (var i=0; i < this.length; i++) {
// Matches identical (===), not just similar (==).
    if (this[i] === value) { return i; }
  }
  return -1;
};

var FacultyList = [];
function addMess(box){
  if (box.checked) { FacultyList.push(box.value); }
  else {
    var p = FacultyList.inArray(box.value);
    FacultyList.splice(p,1);
  }
}
</script>
</fieldset>

<input type="button" value="Show chosen" onclick="alert(FacultyList.join(','))"/>
<!-- Alternative display -->
<!-- input type="button" value="Show chosen" onclick="alert(FacultyList.join('\n'))"/ -->

</body>
</html>

xelawho · 09-24-2012, 02:58 AM

funny - after posting that I came up with something quite similar to version 2...

Code:

<body>
hi:<input type="checkbox" value="hi"/><br>
bye:<input type="checkbox" value="bye"/><br>
later:<input type="checkbox" value="later"/><br>
<input type="button" id="butt" value="show me"/>
<script type = "text/javascript">
(function(){
var arr=[];

document.body.onclick = function(e){
var x = (e && e.target) || (window.event && event.srcElement);
if(x.type=="checkbox"){
if(x.checked){
arr.push(x.value);
} else{
for (var a = 0; a < arr.length; a++) {
if (arr[a]==x.value){
arr.splice(a,1);
break;
				}
			}
		}
	}
}



function showMe(){
alert(arr.toString().replace(/,/g,'\n'))
}

document.getElementById("butt").onclick=showMe;

}) ();
</script>
</body>