Link to home
Start Free TrialLog in
Avatar of yourbudweiser
yourbudweiser

asked on

Must select at least one checkbox

I have a dynamic form with multiple checkboxes. I need to make sure that at least one checkbox is checked but only when the checkbox is actually unchecked. For example, the user unchecks 4 out of 5 boxes but when he unchecks box 5 an alert appears that one box must be checked and box 5 is left checked until he checks another and then unchecks box 5.

Thanks for the help.
Avatar of netsmithcentral
netsmithcentral
Flag of United States of America image
<script type="text/javascript">
<!--
window.onload = function() {
   var chks = document.getElementsByTagName('INPUT');
   for(i = 0; i<chks.length; i++){
      if(chks[i].type.toUpperCase() == 'CHECKBOX') chks[i].onclick = chkCnt;
   }
}

function chkCnt(){
   var pass = false;

   var chks = document.getElementsByTagName('INPUT');
   for(i=0; i<chks.length; i++){
      if(chks[i].checked) pass = true;
   }

   if(!pass){
      alert('You must check at least one box!');

      this.checked = true;
   }
}
Avatar of Zvonko
Zvonko
Flag of North Macedonia image
What are the names of those five checkboxes? Are they all same name or different names?
ASKER CERTIFIED SOLUTION
Avatar of basicinstinct
basicinstinct
Flag of Australia image
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of yourbudweiser
yourbudweiser

ASKER

the checkboxes all have different names as I am composing an asp.net page.

basicinstinct:your solution works in an html page but I am having trouble getting it to run in the context of my .net page.

The checkboxes already have an onClick event but I am trying to load yours first.
Avatar of basicinstinct
basicinstinct
Flag of Australia image
if you already have this:

onclick="doStuff();"

then you should just be able to make it this:

onclick="doStuff(); return checkChecked(this);"
Avatar of basicinstinct
basicinstinct
Flag of Australia image
otherwise try this, it will append itself to your existing onclick events...

<html>
<head>
<script type="text/javascript">
      function init()
      {
            var frm = document.myform;
            var chkboxes = getChkBoxes(frm);
            for(var i=0; i<chkboxes.length; i++)
            {
                  if(window.addEventListener)
                  chkboxes[i].addEventListener('click',proxy,true);
                  else
                  chkboxes[i].attachEvent('onclick', proxy);
            }
      }
      
      function proxy(e)
      {
            var el;
            el = e.target;
            if(el != null)
            {
                  if(!checkChecked(el))
                  {
                        e.preventDefault(true);
                  }
            }
            else
            {
                  el = e.srcElement;
                  if(!checkChecked(el))
                  {
                        e.returnValue = false;
                  }
            }
      }
      
      function checkChecked(chkbox)
      {
            var chkboxes = getChkBoxes(chkbox.form);
            var foundChecked = false;
            for(var i=0; i<chkboxes.length; i++)
            {
                  if(chkboxes[i].checked && chkboxes[i] != chkbox)
                  {
                        foundChecked = true;
                        break;
                  }
            }
            return foundChecked;
      }
      
      function getChkBoxes(ancestor)
      {
            var rval = new Array();
            var inputs = ancestor.getElementsByTagName('input');
            for(var i=0; i<inputs.length; i++)
            {
                if(inputs[i].type != null && inputs[i].type.match(/checkbox/i))
                rval.push(inputs[i]);
            }
            return rval;
      }
</script>
<body onload="init();">
<form name="myform">
<input type="checkbox" checked="checked"/>
<input type="checkbox" checked="checked"/>
<input type="checkbox" checked="checked"/>
<input type="checkbox" checked="checked"/>
<input type="checkbox" checked="checked"/>
<input type="checkbox" checked="checked"/>
</form>
</body>
</html>