Checkbox(javascript) selection, first item showing undefined?

Question

I am trying to select and return some items(checkbox). Everything is okay, but the first item is always showing UNDEFINED. can't fix this problem!

My code is as below

function checkList () {
  var checked;
  var i;

  for( i = 0; i < document.form1.length; i++) {
    var element = document.form1[i]
    if (element.type == "checkbox"){
      if (element.checked == true){
        checked = checked + element.value + "<br/>";

      }

    }

  }
  document.getElementById('checked').innerHTML = checked;
}

<form name="form1">
  <input type="checkbox" name="checkbox1" id="checkbox1" value="Pen" />
  <label value="Earned" for="checkbox1">Pen</label>
  <br	/>
  <input type="checkbox" name="checkbox2" id="checkbox2" value="Book" />
  <label value="Earned" for="checkbox2" >Book</label>
  <br/>
  <input type="checkbox" name="checkbox1" id="checkbox3" value="Sharpner" />
  <label value="Earned" for="checkbox3">Sharpner</label>
  <br/>
  <input type="checkbox" id="checkbox4" name="checkbox1" value="Pencil" />
  <label value="Earned" for="checkbox4">Pencil</label>
  <br/> <br/>
  <input type="button" id="done" value="Done" onclick="checkList()" />
  <br/><br/>
</form>

<p >You are taking:</p>
<span id="checked"></span>

Get your checkbox names and id's sorted out first and try again. — Shane
– Shane, Commented Jun 9, 2015 at 11:14

Birdy · Accepted Answer · 2015-06-09 11:18:54Z

2

Try to Change

<form name="form1">
  <input type="checkbox" name="checkbox1" id="checkbox1" value="Pen" />
  <label value="Earned" for="checkbox1">Pen</label>
  <br   />
  <input type="checkbox" name="checkbox2" id="checkbox2" value="Book" />
  <label value="Earned" for="checkbox2" for="checkbox">Book</label>
  <br/>
  <input type="checkbox" name="checkbox1" id="checkbox3" value="Sharpner" />
  <label value="Earned" for="checkbox3" for="checkbox" for="checkbox">Sharpner</label>
  <br/>
  <input type="checkbox" id="checkbox4" name="checkbox1" value="Pencil" />
  <label value="Earned" for="checkbox4">Pencil</label>
  <br/> <br/>
  <input type="button" id="done" value="Done" onclick="checkList()" />
  <br/><br/>
</form>

<p >You are taking:</p>
<span id="checked"></span>

to This....

    <form name="form1">
  <input type="checkbox" name="checkbox1" id="checkbox1" value="Pen" />
  <label value="Earned" for="checkbox1">Pen</label>
  <br   />
  <input type="checkbox" name="checkbox2" id="checkbox2" value="Book" />
  <label value="Earned" for="checkbox2">Book</label>
  <br/>
  <input type="checkbox" name="checkbox3" id="checkbox3" value="Sharpner" />
  <label value="Earned" for="checkbox">Sharpner</label>
  <br/>
  <input type="checkbox" id="checkbox4" name="checkbox4" value="Pencil" />
  <label value="Earned" for="checkbox4">Pencil</label>
  <br/> <br/>
  <input type="button" id="done" value="Done" onclick="checkList()" />
  <br/><br/>
</form>

<p >You are taking:</p>
<span id="checked"></span>

You have multiple duplications within the code such as (for="")

Let me know, Thanks

edited Jun 9, 2015 at 11:18

answered Jun 9, 2015 at 11:17

Birdy

7731 gold badge6 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

rst Over a year ago

What did you change and why? Explain please.

Birdy Over a year ago

Robert, In the OP he has several duplications of for="" in each label and that looked like it could have been causing confusion. Im still learning myself so was just a thought. :)

SajibBD Over a year ago

@Birdy That was my mistake.

rst Over a year ago

@Birdy: don't explain to me, I saw that. It's more for you to make a better answer ;)

rst · Accepted Answer · 2015-06-09 11:16:25Z

1

Change

 var checked;  // like this, checked is undefined

to

 var checked = ""; // now it's simply empty

here's a fiddle http://jsfiddle.net/sq9938b0/

answered Jun 9, 2015 at 11:16

rst

2,7644 gold badges24 silver badges57 bronze badges

Comments

martynasma · Accepted Answer · 2015-06-09 11:17:51Z

The issue is that you initialize checked variable as undefined. When you append the string to undefined it is converted to string "undefined", hence it appearing at the beginning.

Just initialize it as an empty string: var checked = "";

function checkList () {
  var checked = "";
  var i;

  for( i = 0; i < document.form1.length; i++) {
    var element = document.form1[i]
    if (element.type == "checkbox"){
      if (element.checked == true){
        checked = checked + element.value + "<br/>";

      }

    }

  }
  document.getElementById('checked').innerHTML = checked;
}

<form name="form1">
  <input type="checkbox" name="checkbox1" id="checkbox1" value="Pen" />
  <label value="Earned" for="checkbox1">Pen</label>
  <br	/>
  <input type="checkbox" name="checkbox2" id="checkbox2" value="Book" />
  <label value="Earned" for="checkbox2" for="checkbox">Book</label>
  <br/>
  <input type="checkbox" name="checkbox1" id="checkbox3" value="Sharpner" />
  <label value="Earned" for="checkbox3" for="checkbox" for="checkbox">Sharpner</label>
  <br/>
  <input type="checkbox" id="checkbox4" name="checkbox1" value="Pencil" />
  <label value="Earned" for="checkbox4">Pencil</label>
  <br/> <br/>
  <input type="button" id="done" value="Done" onclick="checkList()" />
  <br/><br/>
</form>

<p >You are taking:</p>
<span id="checked"></span>

Dinesh Patra · Accepted Answer · 2015-06-09 11:23:57Z

0

Take a look of the following step

checked = checked + element.value + "
";

In the first loop you have not defined checked. So first time it is

checked = undefined + pen

Intialize

var checked = ''

answered Jun 9, 2015 at 11:23

Dinesh Patra

1,14512 silver badges23 bronze badges

Collectives™ on Stack Overflow

Checkbox(javascript) selection, first item showing undefined?

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related