Check one Checkbox per row in dynamic query output

kensington43 · Dec 3, 2005

I have dynamic output of data where each row has two checkboxes where only one should be checked per row. Not all the rows of checkboxes will be selected but if they do select a checkbox on a row only one can be selected. Since the names are different I cant use radio buttons and this is dynamic so it gives me about 100 rows of info. Please advise How I can make sure only one checkbox is checked so they cant check both boxes in one row?

I have tried several JavaScript attempts but all seem to check one checkbox and ALL other checkboxes on every Row cant be checked like my attempt below due to the dynamic output from a database.

Any suggestions?

Code:

<html><body> 
<script> 
function only_one(cBox) 
{ 
// See if box being clicked gets checked 
var alreadyChecked=false; 
if (cBox.checked) 
   alreadyChecked=true; // True that it was alreadyChecked'ed 

// Uncheck both boxes 
document.getElementById('manager').checked = false; 
document.getElementById('admin').checked = false; 

// If the box clicked on was alreadyChecked, check it again. 
if (alreadyChecked) 
   cBox.checked=true; 
} 
</script> 

<!-- The variable #ID# will have a unique different number so for 100 rows it will have 100 different numbers with each row (each row has just two checkboxes with Admin and Manager id's) having the same number.  -->
<form name="employees"> 
<cfoutput query="myQuery">

a<input type="Checkbox" value="#ID#" id="admin" name="fieldOne" onclick="only_one(this)">

b<input type="Checkbox" value="#ID#" id="manager" name="fieldTwo" onclick="only_one(this)"></cfoutput> 
</form> 
</body></html>

tsuji · Dec 3, 2005

Personally do not like such kind of multiple elements of same id... but do what you can until it's time to make it better. This revision assume only _one_ parallel checkbox (one "admin" one "manager" pair). It is coded into bfound. If not, relax bfound and oelem construction.
[tt]
function only_one(cBox)
{
[red]/* commented all out[/red]
// See if box being clicked gets checked
var alreadyChecked=false;
if (cBox.checked)
alreadyChecked=true; // True that it was alreadyChecked'ed
[red]*/[/red]
[blue]
var w=cBox.value;
var x=cBox.name;
var y=cBox.value;
var bfound=false;

var z=(x=="fieldOne")?"fieldTwo":"fieldOne";
var celem=document.getElementsByName(z);
var oelem;
for (var i=0;i<celem.length;i++) {
if (celem.value==y) {
bfound=true;
oelem=celem;
break;
}
}

if (bfound) {
oelem.checked=!cBox.checked;
}
[/blue]
[red]/* commented all out[/red]
// Uncheck both boxes
document.getElementById('manager').checked = false;
document.getElementById('admin').checked = false;

// If the box clicked on was alreadyChecked, check it again.
if (alreadyChecked)
cBox.checked=true;
[red]*/[/red]
}
[/tt]

tsuji · Dec 3, 2005

Further Notes:

[1] var w is redundant. It was where I change my mind.
[2] If you want to leave the other checkbox status as it is when the cBox is clicked to unchecked it, then you can modify the if (bfound) { } part. For instance,
[tt]
if (bfound) { //alternative behavior
if (cBox.checked) { oelem.checked=!cBox.checked; }
}
[/tt]
In this case, if cBox is just being unchecked, the other checkbox can be checked or unchecked undisturbed. It really depends on what you want.

kensington43 · Dec 5, 2005

Thanks!!

This tertiary condition is working like this??
var z=(x=="fieldOne")?"fieldTwo":"fieldOne";
if x is equivilant to fieldOne then z will be assigned to fieldTwo else z will be equal to fieldOne.

I looked up getElementsByName in my books and cant find it. It is a method that fetches all the User Selected CheckBoxes(CheckBox objects)? If I had 4 rows it would give me 4 checkboxes available for checking??

tsuji · Dec 5, 2005

Why don't you check it yourself? You know the logic design of your page better. I read into it and have plenty of excuse to read it wrong, and you ask me back on that part you have full knowledge, the server (cfoutput) part?!...

Both answers are affirmative.

document.getElementsByName is fundamental to html dom. You might indeed not find it in a book of general javascript book? (But you must not search hard enough.) Find one with javascript hosted by user-agents (browser) to interact with html page.

tsuji · Dec 5, 2005

I was upset by the question. So let me give more precise description. It is not enough to generally speaking of 2 or 4 or 5 checkboxes. It's all about them being divided into two groups, one named "fieldOne" the other "fieldTwo". The return will be checking the other groups. But the check to find out of the big series of parallel rows based on the value, in that case, may be insufficient. So, the question cannot be answered in abstract... The logic of the thing remains the same, just more criteria to meet.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Check one Checkbox per row in dynamic query output

kensington43

Technical User

tsuji

Technical User

tsuji

Technical User

kensington43

Technical User

tsuji

Technical User

tsuji

Technical User

Similar threads

Part and Inventory Search

Sponsor