?
Solved

Select at least one checkbox in a form where checkbox names are all different.

Posted on 2003-03-27
12
Medium Priority
?
250 Views
Last Modified: 2012-06-27
I have found some code do make sure that at least one checkbox is selected when they all have the same name.  The code is pasted below:

// require that at least one checkbox be checked
var checkSelected = false;
for (i = 0;  i < theForm.checkbox2.length;  i++)
{
if (theForm.checkbox2[i].checked)
checkSelected = true;
}
if (!checkSelected)
{
alert("Please select at least one of the \"Test Checkbox\" options.");
return (false);
}

The problem is that on my page, the checkboxes all have different names and I need them to stay that way:

<input type="checkbox" name="A1" value="True">Selection A, Option 1<br>
<input type="checkbox" name="A2" value="True">Selection A, Option 2<br>
<input type="checkbox" name="A3" value="True">Selection A, Option 3<br>
<input type="checkbox" name="A4" value="True">Selection A, Option 4<br>

To complicate things further I have 2 checkbox lists in the same form:

<input type="checkbox" name="A1" value="True">Selection A, Option 1<br>
<input type="checkbox" name="A2" value="True">Selection A, Option 2<br>
<input type="checkbox" name="A3" value="True">Selection A, Option 3<br>
<input type="checkbox" name="A4" value="True">Selection A, Option 4<br>
<br>
<input type="checkbox" name="B1" value="True">Selection B, Option 1<br>
<input type="checkbox" name="B2" value="True">Selection B, Option 2<br>
<input type="checkbox" name="B3" value="True">Selection B, Option 3<br>
<input type="checkbox" name="B4" value="True">Selection B, Option 4<br>

I need to make sure that the user selects AT LEAST ONE checkbox from Selection A and AT LEAST ONE checkbox from Selection B.

Can anybody help?

Thanks

Matt
0
Comment
Question by:videnda
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 3
  • 2
  • +2
12 Comments
 

Expert Comment

by:havik83rs
ID: 8219365
var checkSelected = false;
var checkSelected2 = false;

if(theForm.A1.checked || theForm.A2.checked || ...) {
  checkSelected = true;
}
if(theForm.B1.checked || ...) {
  checkSelected2 = true;
}

if(!checkSelected) {
alert("Please select at least one of the options.");
return (false);
}

you should consider having the checkboxes of the same name.  It makes things easier.

Havik
0
 

Expert Comment

by:havik83rs
ID: 8219375
that last if statement should be:

if(!checkSelected && !checkSelected2) {
// code here
}

if you would like the coding a different way or this doesn't work let me know

havik
0
 
LVL 6

Expert Comment

by:thomasdodds
ID: 8219602
having the checkboxes with the same name would post only the checked values back to the server - which has been said would make things easier:

example
<input type="checkbox" name="A" value="A1|True">Selection A, Option 1<br>
<input type="checkbox" name="A" value="A2|True">Selection A, Option 2<br>
<input type="checkbox" name="A" value="A3|True">Selection A, Option 3<br>
<input type="checkbox" name="A" value="A4|True">Selection A, Option 4<br>

if option 1 and 3 are checked then the posted value is:

Request.Form("A") = "A1|True,A3|True"

so you can do:

arrCheckValueA = Split(Request.Form("A"),",")

which gives:

arrCheckValueA(0) = "A1|True"
arrCheckValueA(1) = "A3|True"

or you could loop through the array if it should suit you ...
0
Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

 
LVL 12

Expert Comment

by:lil_puffball
ID: 8221975
I agree with thomas, looping is the easiest way:

function check()
var valid=false;
for(i=1;i<#;i++){ //set # to number of checkboxes in a certain group
if(document.formname.elements['A'+i].checked==true}{valid=true;}
}

if(valid==false;){alert('Please select at least one checkbox')}
}
0
 
LVL 12

Expert Comment

by:lil_puffball
ID: 8221980
sorry, shouldn't be semicolon in the second if statement.
0
 

Expert Comment

by:VKRP
ID: 8223306
head:
-------------
var ch;
function check(obj){for(c=0;c<obj.childNodes.length;c++){if(obj.childNodes(c).type=="checkbox"&&obj.childNodes(c).checked==true)ch=1}if(!ch){alert("No checkbox checked...");return false}}

form tag:
-------------
<form onsubmit="return check(this)" ...>

enjoy..
0
 

Author Comment

by:videnda
ID: 8245435
Thank you for your comments so far.

The names NEED to be different, because I have another script which automatically checks all the boxes with the same name when the first is checked, as some of the checkboxes are repeated within a data shaping recordset. e.g

Selection A
Option 1, Option 2, Option 3, Option 4

Selection B
SubHeading 1
Option 1, Option 2, Option3

SubHeading 2
Option 2, Option 3, Option 4

My code requires that I loop through all of the checkboxes anyway, whether checked or unchecked and action each state differently.

The answer that best matches my requirements is from  havik83rs where he/she says:

if(theForm.A1.checked || theForm.A2.checked || ...) {
 checkSelected = true;
}
if(theForm.B1.checked || ...) {
 checkSelected2 = true;
}

The only problem with this is that because the values are dynamically driven, they are not ordered numerically and I can't determine how many checkboxes there will be.

I have copied my code below so you can see what I mean. Sorry about the length:


<html>
   <head>
      <script type="text/javascript">
function set(obj)
{

var sName =  obj.name  ;
var bState = obj.checked;
var arr = document.refills[sName];
      for (i=0; i <arr.length;i++){arr[i].checked=bState}}
      </script>
   </head>
   <body>
      <form name="refills">
         <table>
            <tr>
               <td>
                  <table border="0" cellspacing="0" cellpadding="0">
                     <tr>
                        <td><b>AutoJanitor - Cleaner & Deodorisers</b></td>
                     </tr>

                     <tr>
                        <td width="250px"><input type="checkbox" name="Checkbox7" value=
                        "7" onclick="set(this)">Expressions</td>

                        <td width="250px"><input type="checkbox" name="Checkbox3" value=
                        "3" onclick="set(this)"> Floral Sense</td>

                        <td width="250px"><input type="checkbox" name="Checkbox12" value=
                        "12" onclick="set(this)"> Reflections</td>
                     </tr>

                     <tr>
                        <td width="250px"><input type="checkbox" name="Checkbox1" value=
                        "1" onclick="set(this)"> Vibrant Sense</td>
                     </tr>
                  </table>
               </td>
            </tr>

            <tr bgcolor="#EBEBEB">
               <td>
                  <table border="0" cellspacing="0" cellpadding="0">
                     <tr>
                        <td><b>AutoJanitor - Other</b></td>
                     </tr>

                     <tr>
                        <td width="250px"><input type="checkbox" name="Checkbox27" value=
                        "27" onclick="set(this)"> Bio-Flush</td>

                        <td width="250px"><input type="checkbox" name="Checkbox28" value=
                        "28" onclick="set(this)"> Bio-Sense</td>
                     </tr>
                  </table>
               </td>
            </tr>

            <tr bgcolor="#F1C5F1">
               <td>
                  <table border="0" cellspacing="0" cellpadding="0">
                     <tr>
                        <td><b>AutoSanitizer</b></td>
                     </tr>

                     <tr>
                        <td width="250px"><input type="checkbox" name="Checkbox26" value=
                        "26" onclick="set(this)"> Bio-Purinel</td>

                        <td width="250px"><input type="checkbox" name="Checkbox25" value=
                        "25" onclick="set(this)"> Purinel</td>
                     </tr>
                  </table>
               </td>
            </tr>

            <tr bgcolor="#EBEBEB">
               <td>
                  <table border="0" cellspacing="0" cellpadding="0">
                     <tr>
                        <td><b>AutoSoap</b></td>
                     </tr>

                     <tr>
                        <td width="250px"><input type="checkbox" name="Checkbox30" value=
                        "30" onclick="set(this)"> HandCleanser 2 x 1600ml Refills</td>

                        <td width="250px"><input type="checkbox" name="Checkbox29" value=
                        "29" onclick="set(this)"> HandCleanser 2 x 800ml Refills</td>
                     </tr>
                  </table>
               </td>
            </tr>

            <tr bgcolor="#F1C5F1">
               <td>
                  <table border="0" cellspacing="0" cellpadding="0">
                     <tr>
                        <td><b>Citrus</b></td>
                     </tr>

                     <tr>
                        <td width="250px"><input type="checkbox" name="Checkbox4" value=
                        "4" onclick="set(this)"> Clean Sense</td>

                        <td width="250px"><input type="checkbox" name="Checkbox7" value=
                        "7" onclick="set(this)"> Expressions</td>

                        <td width="250px"><input type="checkbox" name="Checkbox11" value=
                        "11" onclick="set(this)"> Perceptions</td>
                     </tr>
                  </table>
               </td>
            </tr>

            <tr bgcolor="#EBEBEB">
               <td>
                  <table border="0" cellspacing="0" cellpadding="0">
                     <tr>
                        <td><b>Earth</b></td>
                     </tr>

                     <tr>
                        <td width="250px"><input type="checkbox" name="Checkbox5" value=
                        "5" onclick="set(this)"> Radiant Sense</td>

                        <td width="250px"><input type="checkbox" name="Checkbox13" value=
                        "13" onclick="set(this)"> Sensations</td>
                     </tr>
                  </table>
               </td>
            </tr>

            <tr bgcolor="#F1C5F1">
               <td>
                  <table border="0" cellspacing="0" cellpadding="0">
                     <tr>
                        <td><b>Floral</b></td>
                     </tr>

                     <tr>
                        <td width="250px"><input type="checkbox" name="Checkbox3" value=
                        "3" onclick="set(this)"> Floral Sense</td>

                        <td width="250px"><input type="checkbox" name="Checkbox8" value=
                        "8" onclick="set(this)"> Illusions</td>

                        <td width="250px"><input type="checkbox" name="Checkbox10" value=
                        "10" onclick="set(this)"> Inspirations</td>
                     </tr>
                  </table>
               </td>
            </tr>

            <tr bgcolor="#EBEBEB">
               <td>
                  <table border="0" cellspacing="0" cellpadding="0">
                     <tr>
                        <td><b>Forest</b></td>
                     </tr>

                     <tr>
                        <td width="250px"><input type="checkbox" name="Checkbox12" value=
                        "12" onclick="set(this)"> Reflections</td>

                        <td width="250px"><input type="checkbox" name="Checkbox1" value=
                        "1" onclick="set(this)"> Vibrant Sense</td>
                     </tr>
                  </table>
               </td>
            </tr>

            <tr bgcolor="#F1C5F1">
               <td>
                  <table border="0" cellspacing="0" cellpadding="0">
                     <tr>
                        <td><b>Fruit</b></td>
                     </tr>

                     <tr>
                        <td width="250px"><input type="checkbox" name="Checkbox6" value=
                        "6" onclick="set(this)"> Anticipation</td>

                        <td width="250px"><input type="checkbox" name="Checkbox9" value=
                        "9" onclick="set(this)"> Impressions</td>

                        <td width="250px"><input type="checkbox" name="Checkbox2" value=
                        "2" onclick="set(this)"> Tranquil Sense</td>
                     </tr>
                  </table>
               </td>
            </tr>

            <tr bgcolor="#EBEBEB">
               <td>
                  <table border="0" cellspacing="0" cellpadding="0">
                     <tr>
                        <td><b>Natures Aromas</b></td>
                     </tr>

                     <tr>
                        <td width="250px"><input type="checkbox" name="Checkbox15" value=
                        "15" onclick="set(this)"> Essence of Oudh</td>
                     </tr>
                  </table>
               </td>
            </tr>

            <tr bgcolor="#F1C5F1">
               <td>
                  <table border="0" cellspacing="0" cellpadding="0">
                     <tr>
                        <td><b>Odour Neutraliser</b></td>
                     </tr>

                     <tr>
                        <td width="250px"><input type="checkbox" name="Checkbox14" value=
                        "14" onclick="set(this)"> Odour Neutraliser</td>
                     </tr>
                  </table>
               </td>
            </tr>

            <tr bgcolor="#EBEBEB">
               <td>
                  <table border="0" cellspacing="0" cellpadding="0">
                     <tr>
                        <td><b>Preference Fragrances</b></td>
                     </tr>

                     <tr>
                        <td width="250px"><input type="checkbox" name="Checkbox24" value=
                        "24" onclick="set(this)"> Cherry Berry</td>

                        <td width="250px"><input type="checkbox" name="Checkbox20" value=
                        "20" onclick="set(this)"> Cinnamon Spice</td>

                        <td width="250px"><input type="checkbox" name="Checkbox4" value=
                        "4" onclick="set(this)"> Clean Sense</td>
                     </tr>

                     <tr>
                        <td width="250px"><input type="checkbox" name="Checkbox22" value=
                        "22" onclick="set(this)"> Country Garden</td>

                        <td width="250px"><input type="checkbox" name="Checkbox3" value=
                        "3" onclick="set(this)"> Floral Sense</td>

                        <td width="250px"><input type="checkbox" name="Checkbox23" value=
                        "23" onclick="set(this)"> Mandarin Orange</td>
                     </tr>

                     <tr>
                        <td width="250px"><input type="checkbox" name="Checkbox21" value=
                        "21" onclick="set(this)"> Ocean Breeze</td>

                        <td width="250px"><input type="checkbox" name="Checkbox5" value=
                        "5" onclick="set(this)"> Radiant Sense</td>

                        <td width="250px"><input type="checkbox" name="Checkbox2" value=
                        "2" onclick="set(this)"> Tranquil Sense</td>
                     </tr>

                     <tr>
                        <td width="250px"><input type="checkbox" name="Checkbox1" value=
                        "1" onclick="set(this)"> Vibrant Sense</td>
                     </tr>
                  </table>
               </td>
            </tr>

            <tr bgcolor="#F1C5F1">
               <td>
                  <table border="0" cellspacing="0" cellpadding="0">
                     <tr>
                        <td><b>PumpSoap</b></td>
                     </tr>

                     <tr>
                        <td width="250px"><input type="checkbox" name="Checkbox30" value=
                        "30" onclick="set(this)"> HandCleanser 2 x 1600ml Refills</td>

                        <td width="250px"><input type="checkbox" name="Checkbox29" value=
                        "29" onclick="set(this)"> HandCleanser 2 x 800ml Refills</td>
                     </tr>
                  </table>
               </td>
            </tr>

            <tr bgcolor="#EBEBEB">
               <td>
                  <table border="0" cellspacing="0" cellpadding="0">
                     <tr>
                        <td><b>Standard Fragrances</b></td>
                     </tr>

                     <tr>
                        <td width="250px"><input type="checkbox" name="Checkbox6" value=
                        "6" onclick="set(this)"> Anticipation</td>

                        <td width="250px"><input type="checkbox" name="Checkbox7" value=
                        "7" onclick="set(this)"> Expressions</td>

                        <td width="250px"><input type="checkbox" name="Checkbox8" value=
                        "8" onclick="set(this)"> Illusions</td>
                     </tr>

                     <tr>
                        <td width="250px"><input type="checkbox" name="Checkbox9" value=
                        "9" onclick="set(this)"> Impressions</td>

                        <td width="250px"><input type="checkbox" name="Checkbox10" value=
                        "10" onclick="set(this)"> Inspirations</td>

                        <td width="250px"><input type="checkbox" name="Checkbox14" value=
                        "14" onclick="set(this)"> Odour Neutraliser</td>
                     </tr>

                     <tr>
                        <td width="250px"><input type="checkbox" name="Checkbox11" value=
                        "11" onclick="set(this)"> Perceptions</td>

                        <td width="250px"><input type="checkbox" name="Checkbox12" value=
                        "12" onclick="set(this)"> Reflections</td>

                        <td width="250px"><input type="checkbox" name="Checkbox13" value=
                        "13" onclick="set(this)"> Sensations</td>
                     </tr>
                  </table>
               </td>
            </tr>

            <tr bgcolor="#F1C5F1">
               <td>
                  <table border="0" cellspacing="0" cellpadding="0">
                     <tr>
                        <td><b>SWAK - Insect Repellent</b></td>
                     </tr>

                     <tr>
                        <td width="250px"><input type="checkbox" name="Checkbox16" value=
                        "16" onclick="set(this)"> SWAK Natural</td>

                        <td width="250px"><input type="checkbox" name="Checkbox17" value=
                        "17" onclick="set(this)"> SWAK Professional</td>
                     </tr>
                  </table>
               </td>
            </tr>

            <tr bgcolor="#EBEBEB">
               <td>
                  <table border="0" cellspacing="0" cellpadding="0">
                     <tr>
                        <td><b>Value Range</b></td>
                     </tr>

                     <tr>
                        <td width="250px"><input type="checkbox" name="Checkbox18" value=
                        "18" onclick="set(this)"> Baby Soft</td>

                        <td width="250px"><input type="checkbox" name="Checkbox19" value=
                        "19" onclick="set(this)"> Citrus Fresh</td>

                        <td width="250px"><input type="checkbox" name="Checkbox31" value=
                        "31" onclick="set(this)"> Test for editing Check boxes</td>
                     </tr>
                  </table>
               </td>
            </tr>
         </table>
      </form>
   </body>
</html>

0
 
LVL 12

Expert Comment

by:lil_puffball
ID: 8249061
But in my script they can be different. Have you tried it yet?
0
 

Author Comment

by:videnda
ID: 8290287
Just tried your code lil puffball.

First I got an error 'expected {'.  So I put one in after here like IE6 told me:
function check()

Then I got an error expected ).  I assumed that this:
if(document.formname.elements['A'+i].checked==true}{valid=true;}
was meant to say this:
if(document.formname.elements['A'+i].checked==true){valid=true;}

Now I get no errors.  I have changd the formname to refills as needed and the number of chechboxes to 15 as a test, and used the correct checkbox names but I get the alert box appearing no matter whether I check any or none of the boxes.

I have pasted snippets of my code below.  Perhaps you can tell me where I am going wrong?  I appreciate your help:

-part 1--------------------------------------------

<script type="text/javascript">      
function check()
{
var valid=false;
for(i=1;i<15;i++){ //set # to number of checkboxes in a certain group
if(document.refills.elements['Checkbox'+i].checked==true){valid=true;}
}

if(valid==false){alert('Please select at least one checkbox')}
}
</script>

-part 2--------------------------------------------
<form name="refills">

-part 3--------------------------------------------
<tr>
     <td width="250px"><input type="checkbox" name="Checkbox7" value= "7" onclick="set(this)">Expressions</td>
     <td width="250px"><input type="checkbox" name="Checkbox3" value= "3" onclick="set(this)"> Floral Sense</td>
     <td width="250px"><input type="checkbox" name="Checkbox12" value= "12" onclick="set(this)"> Reflections</td>
</tr>

-part 4--------------------------------------------
<input type="submit" name="Submit" value="Submit" onclick="check()">

Regards

Alex
0
 
LVL 12

Accepted Solution

by:
lil_puffball earned 200 total points
ID: 8295207
Ok, here's an improved script to try:

<script>
var info=new Array('A','B','C');
var valid=new Array();

function check(frm){
for(i=0;i<info.length;i++){
  valid[i]=false;
  for(j=0;j<frm.elements.length;j++){
    if(frm.elements[j].name.charAt(0)==info[i]){
      if(frm.elements[j].checked==true){valid[i]=true;}}}}
var allvalid=true;
for(i=0;i<valid.length;i++){if(!valid[i]){alert('Must select from Group '+info[i]);allvalid=false;}}
if(allvalid){alert('You\'re Good to go!');}
}

</script>

<form>
<input type='checkbox' name='A1'>A1<br>
<input type='checkbox' name='A2'>A2<br>
<input type='checkbox' name='A3'>A3<br>
<p>
<input type='checkbox' name='B1'>B1<br>
<input type='checkbox' name='B2'>B2<br>
<input type='checkbox' name='B3'>B3<br>
<input type='checkbox' name='B4'>B4<br>
<input type='checkbox' name='B5'>B5<br>
<p>
<input type='checkbox' name='C1'>C1<br>
<input type='checkbox' name='C2'>C2<br>
<input type='checkbox' name='C3'>C3<br>
<input type='checkbox' name='C4'>C4<br>
<input type='checkbox' name='C5'>C5<br>
<input type='checkbox' name='C6'>C6<br>
<input type='checkbox' name='C7'>C7<br>
<input type='checkbox' name='C8'>C8<br>

<input type='button' onClick="check(this.form);" value="check">
</form>
0
 

Author Comment

by:videnda
ID: 8298906
Works perfectly. Thanks for you time lil_puffball.
Excellent answer.
0
 
LVL 12

Expert Comment

by:lil_puffball
ID: 8303507
Your welcome! Thanks for the A! :D
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

801 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question