Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 3257
  • Last Modified:

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.
0
yourbudweiser
Asked:
yourbudweiser
1 Solution
 
netsmithcentralCommented:
<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;
   }
}
0
 
ZvonkoSystems architectCommented:
What are the names of those five checkboxes? Are they all same name or different names?
0
 
basicinstinctCommented:
<html>
<head>
<script type="text/javascript">
      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>
<form>
<input type="checkbox" checked="checked" onclick="return checkChecked(this);"/>
<input type="checkbox" checked="checked" onclick="return checkChecked(this);"/>
<input type="checkbox" checked="checked" onclick="return checkChecked(this);"/>
<input type="checkbox" checked="checked" onclick="return checkChecked(this);"/>
<input type="checkbox" checked="checked" onclick="return checkChecked(this);"/>
<input type="checkbox" checked="checked" onclick="return checkChecked(this);"/>
</form>
</body>
</html>
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
yourbudweiserAuthor Commented:
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.
0
 
basicinstinctCommented:
if you already have this:

onclick="doStuff();"

then you should just be able to make it this:

onclick="doStuff(); return checkChecked(this);"
0
 
basicinstinctCommented:
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>
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now