Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,073
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb Checkbox value storage

    'xelawho' had a short snippet of code
    See post #3 of: Show array of messages to user
    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>

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,907
    Thanks
    56
    Thanked 544 Times in 541 Posts
    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>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •