开发者

How to validate for checkbox selection if all checkbox have same name?

Hi All I have a group of check box having same name so as to get the array of single variable when it is posted on serverside for exampleL

<input type="checkbox" name="midlevelusers[]" value="1">
<input type="checkbox" name="midlevelusers[]" value="1">
<input type="checkbox" name="midlevelusers[]" value="1">
<input type="checkbox" name="midlevelusers[]" value="1">

I need a javascript validation to check whethe开发者_开发知识库r any checkbox is selected or not?

Thanks and Regards

NOTE: I need javascript validation


You can access the DOM elements and check their checked property. For instance:

var list, index, item, checkedCount;

checkedCount = 0;
list = document.getElementsByTagName('input');
for (index = 0; index < list.length; ++index) {
    item = list[index];
    if (item.getAttribute('type') === "checkbox"
        && item.checked
        && item.name === "midlevelusers[]") {
        ++checkedCount;
    }
 }

Live example

There we're looking through the whole document, which may not be efficient. If you have a container around these (and presumably you do, a form element), then you can give that element an ID and then look only within it (only the var, form =, and list = lines are new/different):

var form, list, index, item, checkedCount;

checkedCount = 0;
form = document.getElementById('theForm');
list = form.getElementsByTagName('input');
for (index = 0; index < list.length; ++index) {
    item = list[index];
    if (item.getAttribute('type') === "checkbox"
        && item.checked
        && item.name === "midlevelusers[]") {
        ++checkedCount;
    }
 }

Live example


Off-topic: You haven't mentioned using a library, so I haven't used one above, but FWIW this stuff is much easier if you use one like jQuery, Prototype, YUI, Closure, or any of several others. For instance, with jQuery:

var checkedCount = $("input[type=checkbox][name^=midlevelusers]:checked").length;

Live example Other libraries will be similar, though the details will vary.


<form name="myform" method="POST" action="" onsubmit="return checkTheBox();">
  <input type="checkbox" name="midlevelusers[]" value="1" /> 1 &nbsp;&nbsp;
  <input type="checkbox" name="midlevelusers[]" value="2" /> 2 &nbsp;&nbsp;
  <input type="checkbox" name="midlevelusers[]" value="3" /> 3 &nbsp;&nbsp;
  <input type="checkbox" name="midlevelusers[]" value="4" /> 4 &nbsp;&nbsp;
  <input type="checkbox" name="midlevelusers[]" value="5" /> 5 &nbsp;&nbsp;
  <input type="submit" value="Submit Form" />
</form>

<script type="text/javascript">
  function checkTheBox() {
    var flag = 0;
    for (var i = 0; i< 5; i++) {
      if(document.myform["midlevelusers[]"][i].checked){
        flag ++;
      }
    }
    if (flag != 1) {
      alert ("You must check one and only one checkbox!");
      return false;
    }
    return true;
  }
</script>


try,

function validate() {
    var chk = document.getElementsByName('midlevelusers[]')
    var len = chk.length

    for(i=0;i<len;i++)
    {
         if(chk[i].checked){
        return true;
          }
    }
    return false;
    }


use id's

<input type="checkbox" name="midlevelusers[]" id="mlu1" value="1">
<input type="checkbox" name="midlevelusers[]" id="mlu2" value="2">
<input type="checkbox" name="midlevelusers[]" id="mlu3" value="3">
<input type="checkbox" name="midlevelusers[]" id="mlu4" value="4">

now you can do

for (var i=1;i<5;i++){
  var el = document.getElementById('mlu'+i);
  if (el.checked) { /* do something */}
}


This function would alert whether or not a checkbox has any values checked.

function isChecked(checkboxarray){
    for (counter = 0; counter < checkboxarray.length; counter++){
        if (checkboxarray[counter].checked){
            alert("Checkbox has at least one checked");
        else{
            alert("None checked");
        }

You would need to add a bit more to do what you actually want to do with it but that will get you on the right track I think!


You could use jQuery and do it this way:

if($('input[name="light[]"]:checked').length < 1){
            alert("Please enter the light conditions");
}
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜