javascript: only allow 1 check per id property[SLOW RESOLUTION]

**lleemon** · Jun 3rd, 2004, 01:27 PM

I have a form with a number of rows and each row has a checkbox that will pass a value on. I also am having a different ID value for each checkbox unless it is a related row. Does anyone know if I can only allow 1 checkbox to be checked per unique ID?

You will see in my code below that I would only allow one row checked between Row1 and Row2 since they both have an ID of chkAdd[a]. Row3 and Row4 are fine since they only have one unique ID value.

If anyone could help I would be greatful.
Thanks in advance.

Code:

<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<html>
<head>
<title>ID Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
function fnCompareCheckboxes(obj){
	var vTotalChd = 0;
	var vMax = document.frmUnMapped.chkAdd.length;

	for (var vIdx =0; vIdx < vMax; vIdx++){
		if (eval("document.frmUnMapped.chkAdd.checked") == true){
			vTotalCkd += 1;
		}
	}
	if (vTotalChd > 1){
		alert("1 Choice only for this");
		obj.checked = false;
	}
}
</script>
</head>

<body>
<form action="" method="post" name="frmUnMapped" id="frmUnMapped">
  <table width="650" border="1" cellspacing="0" cellpadding="0">
    <tr> 
      <td>Row1</td>
      <td><input name="chkAdd" type="checkbox" id="chkAdd[a]" value="1" onClick="fnCompareCheckboxes(this)"></td>
      <td>&nbsp;</td>
    </tr>
    <tr> 
      <td>Row2</td>
      <td><input name="chkAdd" type="checkbox" id="chkAdd[a]" value="2" onClick="fnCompareCheckboxes(this)"></td>
      <td>&nbsp;</td>
    </tr>
    <tr> 
      <td>Row3</td>
      <td><input name="chkAdd" type="checkbox" id="chkAdd[b]" value="3" onClick="fnCompareCheckboxes(this)"></td>
      <td>&nbsp;</td>
    </tr>
    <tr> 
      <td>Row4</td>
      <td><input name="chkAdd" type="checkbox" id="chkAdd[c]" value="4" onClick="fnCompareCheckboxes(this)"></td>
      <td>&nbsp;</td>
    </tr>
  </table>
</form>
</body>
</html>

**lleemon** · Jun 10th, 2004, 07:23 AM

The following works but can be slow if over 50 checkboxes. If anyone has a faster way please advise.

Thanks.

Code:

<html>
<head>
<title>Javascript Example</title>
<script language="Javascript">
function fncompareCheckbox(obj){
    for(i=0; i<(window.document.thisForm.chkAdd.length-1); i++)
        for(j=i+1;j<window.document.thisForm.chkAdd.length; j++)
        {
            if((window.document.thisForm.chkAdd[i].id == window.document.thisForm.chkAdd[j].id)&& window.document.thisForm.chkAdd[i].checked && window.document.thisForm.chkAdd[j].checked)
				obj.checked = false;
        }
}
</script>
</head>

<body>

<form name="thisForm" method="POST" action=" ">
    <input type="checkbox" name="chkAdd" value="aa" id="aaa" onClick="fncompareCheckbox(this);">
    checkbox 1<br>
    <input type="checkbox" name="chkAdd" value="bb" id="aaa" onClick="fncompareCheckbox(this);">
    checkbox 2<br>
    <input type="checkbox" name="chkAdd" value="cc" id="ccc" onClick="fncompareCheckbox(this);">
    checkbox 3<br>
    <input type="checkbox" name="chkAdd" value="dd" id="ccc" onClick="fncompareCheckbox(this);">
  checkbox 4</p><br>
  <br>
  <input type="submit" value="Submit" name="B1"><input type="reset" value="Reset" name="B2">

</form>

</body>
</html>

Thanks to Dr. Chen for pointing me in a new direction.

**CornedBee** · Jun 10th, 2004, 11:20 AM

1) No two elements in any HTML document may have the same id, so the preconditions to your problem can't be legally met in the first place.
2) There are design guidelines. Users expect form controls to work in specific ways. A checkbox is expected to be checkable and uncheckable and not affect anything else except maybe that parts of the form get disabled. The radio button however does exactly what you want, its meaning is "only one of the group can be selected at a time". Why do a JS-simulation of this behaviour, confusing the user and stopping everyone with JS disabled, when radio buttons do the same without any additional work?

Code:

<form><div>
<input type="radio" name="aaa" id="aaa1">
<input type="radio" name="aaa" id="aaa2">
<input type="radio" name="aaa" id="aaa3">
<input type="radio" name="bbb" id="bbb1">
<input type="radio" name="bbb" id="bbb2">
<input type="radio" name="bbb" id="bbb3">
</div></form>

Just a suggestion...

**lleemon** · Jun 10th, 2004, 04:55 PM

CornedBee,
Your probably right if I only wanted 1 item selected out of my whole list.

Basically I have a list of say 500 unique records (set A). I also have another set of records in a different source (set B). What I am doing is looping through set A and for each item I strip all character values so only the model number is left. I do this same function on each set B record and see if the model number matches. Note sometimes they do and in set B records we have more then one. So I display 2 records with the same info from set A data but different info from set B. Then I move the the next record of set A and loop again through all set B data. This goes on 500+ times.

If the above makes sense then you will see I could have 500 unique set A values but times 2 would make 1000 total records and I would only want a user to select 1 from each individual grouping (element ID seperates).

As for your point #1, you probably are right but it appears that it works with ID's being the same. Someone else said the same thing but if it works, hey I am using it.

Thanks for your post.

**CornedBee** · Jun 10th, 2004, 05:00 PM

It "works", because browsers are very forgiving, if they weren't, 50% of the current websites wouldn't work.

But I didn't understand the explanation of what you're trying to do.

**Ecniv** · Jun 11th, 2004, 05:12 AM

Originally posted by lleemon
Basically I have a list of say 500 unique records (set A). I also have another set of records in a different source (set B). What I am doing is looping through set A and for each item I strip all character values so only the model number is left. I do this same function on each set B record and see if the model number matches. Note sometimes they do and in set B records we have more then one. So I display 2 records with the same info from set A data but different info from set B. Then I move the the next record of set A and loop again through all set B data. This goes on 500+ times.

If the above makes sense then you will see I could have 500 unique set A values but times 2 would make 1000 total records and I would only want a user to select 1 from each individual grouping (element ID seperates).

So the user gets to select the unique A value, for both A and B...

Table view in html

Code:

A      B
A101   B10
A101   B101
A102   B104
A103   B2

So why not have a check box on the A bit, don't put anything next to the duplicated A bit if there are more than one B bit.

Giving the following.

Code:

A      B
A101   B10
       B101
A102   B104
A103   B2

Also, style each row of A (grouped) with a different alternating background color/picture.
This means you have :
1) a unique value to be used in the check box
2) visually the user can see which rows are grouped

Just an option...

The other thought was that the B's have check boxs, except in the groups where they have radio buttons. The depends on what you are doing with the selected boxes though.

Vince

Thread: javascript: only allow 1 check per id property[SLOW RESOLUTION]

Thread Tools

Display

javascript: only allow 1 check per id property[SLOW RESOLUTION]

Posting Permissions