1. This website uses cookies. By continuing to use this website you are giving consent to cookies being used.
    For information on cookies and how you can disable them visit our Cookie Usage page.
    Dismiss Notice

JavaScript Checkboxes and arrays

Discussion in 'Web Development' started by gilbertsavier, Aug 4, 2009.

  1. gilbertsavier

    gilbertsavier New Member

    Hi,
    I need some code which can give an array some values, depending on which checkboxes which is selected.
    I think I will give these checkboxes (lets say 10 checkboxes) some values, and when you have selected the relevant checkboxes, you will have to click a button: "Create array". Then a array is created, and it will have the same number of values as there are checkboxes selected. And the values in the array will be the values of the selected checkboxes.

    If I, for instance, select checkbox number 1, 4 and 7, and I click "Create array", the content of the array will be: 1,4,7

    What will the code be for that. I don´t have the javascript code, only the HTML:

    HTML Code:

    <input type="checkbox" name="alotofcheckboxes" value="1" />
    <input type="checkbox" name="alotofcheckboxes" value="2" />
    <input type="checkbox" name="alotofcheckboxes" value="3" />
    <input type="checkbox" name="alotofcheckboxes" value="4" />
    <input type="checkbox" name="alotofcheckboxes" value="5" />
    <input type="checkbox" name="alotofcheckboxes" value="6" />
    <input type="checkbox" name="alotofcheckboxes" value="7" />
    <input type="checkbox" name="alotofcheckboxes" value="8" />
    <input type="checkbox" name="alotofcheckboxes" value="9" />
    <input type="checkbox" name="alotofcheckboxes" value="10" />

    <br><br>

    <input type="button" value="Create array" onclick=???????????


    Thanks & regards
    Lokananth
     
    gilbertsavier, Aug 4, 2009
    #1
  2. enigma1

    enigma1 New Member

    Here is an example:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en">
<head>
<title>test page</title>
<style type="text/css">

body {
  font-family: Arial, sans-serif;
  font-size: 11px;
  line-height: 1.5;
  background-color: #CCC;
}

#wrapper {
  margin: 0 auto;
  width: 850px;
  position: relative;
}

#content {
  background-color: #FFF;
  height: 800px;
}

</style>
<script language="JavaScript">
function updateArray() {
  var checkedArray = new Array;
  var cboxes = document.getElementsByName('alotofcheckboxes');
  for (var i = 0, j=0; i < cboxes.length; i++) {
    if( cboxes[i].checked ) {
      checkedArray[j] = cboxes[i].value;
      j++;
    }
  }
}
</script>

</head>
<body>
  <div id="wrapper">
    <div id="content" style="text-align: center; padding: 20px 0px 0px 0px">

<input type="checkbox" name="alotofcheckboxes" value="1" />
<input type="checkbox" name="alotofcheckboxes" value="2" />
<input type="checkbox" name="alotofcheckboxes" value="3" />
<input type="checkbox" name="alotofcheckboxes" value="4" />
<input type="checkbox" name="alotofcheckboxes" value="5" />
<input type="checkbox" name="alotofcheckboxes" value="6" />
<input type="checkbox" name="alotofcheckboxes" value="7" />
<input type="checkbox" name="alotofcheckboxes" value="8" />
<input type="checkbox" name="alotofcheckboxes" value="9" />
<input type="checkbox" name="alotofcheckboxes" value="10" />

<br><br>

<input type="button" value="Create array" onclick="updateArray();" />
    </div>
  </div>
</body>
</html>
    The checkedArray is an array and contains the values of the checkboxes.
     
    enigma1, Dec 19, 2009
    #2
    1 person likes this.
  3. CovertPea

    CovertPea Moderator Staff Member Verified Member

    Hi Enigma,

    Just wanted to say welcome to the forum and thank you for all the great help you've been giving to the other members here.
    It's very much appreciated!

    Cheers mate,

    CP
     
    CovertPea, Dec 19, 2009
    #3