Get checkbox values in javascript - Stack Overflow

admin管理员组

文章数量:1277887

Roughly, this is my code:

<form name="mpform" id="mpform">
<input type="checkbox" onclick="mpfunc()" id="mpay" name="mpay[]" value="19" style="float:left;" />
//many of the above input tag - only the value changes with other numbers
</form>
<script type="text/javascript">
function mpfunc()
{
var p=0;
document.getElementById("mpaydiv").style.visibility="visible";
for(var i=0; i< document.getElementById("mpform").elements['mpay[]'].length;i++){
if(document.getElementById("mpform").elements['mpay[]'][i].checked)
p = p + document.getElementById("mpform").elements['mpay[]'][i].value;
}
document.getElementById("mpaydiv").innerHTML=p;
}
</script>
<div id="mpaydiv" style="position:fixed; right:0; visibility:hidden; bottom:0; border:1px solid black; background-color:white; padding:2px 2px;"></div></div>
    </div>

    <div id="footer"></div>
</div>

I have tried substituting getElementById("mpform") with form[0],mpform and others but I cant seem to access the values. With the current getelementid I get

Error: document.getElementById("mpform") is null Source File: index.php?page=fakturi Line: 3938

With mpform I get mpform is undefined as with form[0] Please help. How do I get the sum of the values of all selected checkboxes?

Roughly, this is my code:

<form name="mpform" id="mpform">
<input type="checkbox" onclick="mpfunc()" id="mpay" name="mpay[]" value="19" style="float:left;" />
//many of the above input tag - only the value changes with other numbers
</form>
<script type="text/javascript">
function mpfunc()
{
var p=0;
document.getElementById("mpaydiv").style.visibility="visible";
for(var i=0; i< document.getElementById("mpform").elements['mpay[]'].length;i++){
if(document.getElementById("mpform").elements['mpay[]'][i].checked)
p = p + document.getElementById("mpform").elements['mpay[]'][i].value;
}
document.getElementById("mpaydiv").innerHTML=p;
}
</script>
<div id="mpaydiv" style="position:fixed; right:0; visibility:hidden; bottom:0; border:1px solid black; background-color:white; padding:2px 2px;"></div></div>
    </div>

    <div id="footer"></div>
</div>

I have tried substituting getElementById("mpform") with form[0],mpform and others but I cant seem to access the values. With the current getelementid I get

Error: document.getElementById("mpform") is null Source File: index.php?page=fakturi Line: 3938

With mpform I get mpform is undefined as with form[0] Please help. How do I get the sum of the values of all selected checkboxes?

• javascript

Share Improve this question Follow asked Aug 5, 2011 at 20:11 DreamWaveDreamWave 1,94033 gold badges2828 silver badges6363 bronze badges

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 2

The id of your form must be mpform. You have name="mpform". Add id="mpform".

Also, for efficiency sake, you should change your function to this. Using multiple getElementById for grabbing the same element is very inefficient.

<script type="text/javascript">
function mpfunc()
{
   var p=0;
   document.getElementById("mpaydiv").style.visibility="visible";
   var elements = document.getElementById("mpform").elements;
   for(var i=0; i< elements.length;i++){
      if(elements[i].type == 'checkbox' && elements[i].checked)
         p = p + parseInt(elements[i].value);
   }
   document.getElementById("mpaydiv").innerHTML=p;
}
</script>

I seem to recall IE having issues with the 0 index of the forms array. You can access it through, document.getElementsByName("mpform")[0] or document.forms['mpform']. To get the checkbox descendants, you might use getElementById('mpay') or document.getElementsByName("mpay")[0] or document.getElementsByName("mpform")[0].elements[0]

Should be like this

     <form name="mpform" id="mpform"></form>

You try to get Element By Id but you specified a name for it.

<form id="mpform">

Is it possible that the function is running before the form element has finished loading? Try running the function as part of the window.onload event.

I just tried this out using your html code, and it seems to work. I edited my answer above to show this, but also posted it as another answer to make sure you saw.

<script type="text/javascript">
function mpfunc()
{
   var p=0;
   document.getElementById("mpaydiv").style.visibility="visible";
   var elements = document.getElementById("mpform").elements;
   for(var i=0; i< elements.length;i++){
      if(elements[i].type == 'checkbox' && elements[i].checked)
         p = p + parseInt(elements[i].value);
   }
   document.getElementById("mpaydiv").innerHTML=p;
}
</script>

本文标签： Get checkbox values in javascriptStack Overflow