CODEWITHSUNDEEP
javascriptcheckbox
Hubert
Hubert

Reputation: 443

How do I correct this javascript if i want to deselect checkbox?

I have a javascript code in regards to customising a group of check box. However the result is not what I am look for. Its almost 90% there.

This is the code I will explain what it does below:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<title>checkboxes</title>
<meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
<meta content="Visual Basic .NET 7.1" name="CODE_LANGUAGE">
<meta content="JavaScript" name="vs_defaultClientScript">
<meta content="http://schemas.microsoft.com/intellisense/ie5"
name="vs_targetSchema">
<script language="javascript">
function SingleSelect(regex,current)
{
re = new RegExp(regex);

for(i = 0; i < document.forms[0].elements.length; i++) {

elm = document.forms[0].elements[i];

if (elm.id == 'class') {

elm.checked = false;

}
}

current.checked = true;

 }
/script>
</HEAD>
<body>
<form id="Form1" method="post" runat="server">
<table width="100%" align="center">
<tr>
<td>
<br/>Class 1
<input type="checkbox" id="class" name="cat[]" value="class 1" checked    onclick="SingleSelect('chk',this);" />
<br/>Class 2<input type="checkbox" id="class" name="cat[]" value="class 2" onclick="SingleSelect('chk',this);" />
<br/>Class 3<input type="checkbox" id="class" name="cat[]" value="class 3" onclick="SingleSelect('chk',this);" />
<br/>Class 4<input type="checkbox" id="cat" name="cat[]" value="class 4"  />
<br/>Class 5<input type="checkbox" id="cat" name="cat[]" value="class 5"  />
<br/>Class 6<input type="checkbox" id="cat" name="cat[]" value="class 6"  />
<br/>Class 7<input type="checkbox" id="cat" name="cat[]" value="class 7"  />
</td>
</tr>
</table>
</form>
</body>
</HTML>

This code consists of 7 check box from class 1 to class 7. Currently, for class 1, class 2 and class 3, It would like to allow user to either choose one only. which is what i want.

For class 4, class 5, class 6 and class 7, it would allow users to choose multiple or single or leave it.

However what i want is:

Of Class 1, Class 2 and Class 3, Users are only allowed to choose 1 or don't choose.

Of Class 4, Class 5, Class 6 and Class 7, I do not mind if users select multiple or single or leave it. But of the 7 choices, Users must at least choose 1 in order to submit or else there should have an error message asking them to choose something.

Can anyone help me to edit the javascript code?? or guide me on how to allow checkbox to be uncheck for Class 1, Class 2 and Class 3 Group of check box.

Thanks very Much in advance

CHeers

Upvotes: 1

Views: 695

Answers (4)

Cameron
Cameron

Reputation: 1725

This javascript should work for you:

<script language="javascript">
// fix form so that only one of the first three is clicked at a time.
// return false if form has no elements clicked.
function validateForm(clickedElement) {
 var myForm = document.forms[0]; // consider document.getElementById("Form1");
 var hasOneChecked = false;
 var clickedFirstThree = (myForm != clickedElement);
 var i;
 for(i = myForm.elements.length - 1; i >= 0 ; i--) {
  var elem = myForm.elements[i];
  if(i >= 3 && elem == clickedElement) {
   clickedFirstThree = false;
  }
  if(clickedFirstThree && i < 3) {
   if(elem != clickedElement) {
    elem.checked = false;
   }
  }
  if (elem.checked) {
   hasOneChecked = true;
  }
 }
 return hasOneChecked
}

// validate the form and alert the user if there is a problem
function SingleSelect(e) {
 var isValid = validateForm(e);
 if(!isValid) {
  alert("Please check at least one item.");
 }
 return isValid;
}
</script>

But note that you will need to change ALL of your inputs to contain 

onclick="SingleSelect(this);"

With this piece of code out of the way, I think that the other answers here have given you lots of good advice about how you can improve the rest of your page. Some things to consider:

  1. Each id attribute should be unique
  2. A table that contains a single piece of data is pretty useless
  3. Formatting your code will make it easier to read
  4. Remember to close all of your tags correctly (no missing angle brackets)
  5. Consider adding type="text/javascript" to your script tag.
  6. Consider changing your doctype to xhtml if you want to use self-closing tags like <br />

Upvotes: 1

Kunal Vashist
Kunal Vashist

Reputation: 2471

For class 1,2,3 you can do like this 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
        <title>Untitled Page</title>
        <script type="text/javascript">
            function test(e) {

                if (e.checked) {
                    var get = e.id;

                    for (i = 0; i < document.forms[0].elements.length; i++) {
                        var getting = document.forms[0].elements[i];
                        getting.checked = false;

                    }
                    e.checked = true;

                    }


            }
        </script>
    </head>
    <body>
    <form id="Form1" method="get">
    <input type="checkbox" id="Checkbox1"  name="test[]" value="1" onclick="test(this)"/>
    <input type="checkbox" id="Checkbox2"  name="test[]" value="1" onclick="test(this)"/>
    <input type="checkbox" id="Checkbox3"  name="test[]" value="1" onclick="test(this)"/>

    </form>
    </body>
    </html>

Upvotes: 2

MackeiaN
MackeiaN

Reputation: 61

Maybe not the answer you're looking for, but isn't it easier to split up the different types of input instead. Then you can have a server-side (client-side, or both) validation that at least one of the options 1-7 is selected.

Use for example radio-buttons for the first three (Class1, Class2 and Class3). And just use checkboxes for classes 4 to 7.

<input type="radio" name="none" value="None" checked>No choice for 1-3<br>
<input type="radio" name="class1" value="class1">Class1<br/>
<input type="radio" name="class2" value="class2">Class2<br/>
<input type="radio" name="class3" value="class3">Class3<br/>

<input type="checkbox" name="class4" value="Class4">Class4<br/>
...
<input type="checkbox" name="class7" value="Class7">Class7<br/>

Upvotes: 0

Ilia Frenkel
Ilia Frenkel

Reputation: 1977

You are not supposed to use the same ID multiple times.

Upvotes: 1

Related Questions