bind a cfselect to a check box

EdmondsM · EdmondsM

Hi All, is it possible to have a cfselect binded to a checkbox. What I am
trying to accomplish is the following. I have a cfselect that is populated by
a query. When a user selects an item from the cfselect dropdown, I want the
checkbox to be selected for this dropdown listbox. Either actionscript or
javascript would be ok.

Thanks in advance

BSterner · BSterner

Something like...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Bind Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>

<cfscript>
qTest = QueryNew("");
hls = ArrayNew(1);
ids = ArrayNew(1);
hls[1] = "Headline 1";
hls[2] = "Headline 2";
hls[3] = "Headline 3";
ids[1] = 1;
ids[2] = 2;
ids[3] = 3;
QueryAddColumn(qTest, "Headline", hls);
QueryAddColumn(qTest, "id", ids);
</cfscript>


<cfform name="myForm">
<cfselect name="mySelect"
onChange="javascript:bindToCheckbox(this.selectedI ndex);">
<option value="" selected>-- Select --</option>
<cfoutput query="qTest">
<option value="#qTest.id#">#qTest.Headline#</option>
</cfoutput>
</cfselect>
<br />
<cfoutput query="qTest">
<cfinput
type="checkbox"
name="myCB"
value="#qTest.id#">#qTest.Headline#<br />
</cfoutput>
</cfform>


<script language="javascript">
function bindToCheckbox(index)
{
var target = document.myForm.myCB;
for (var i=0; i < target.length; i++)
{
if (target)
{
target[i].checked = false;
}
}
target[index-1].checked = true;
}
</script>
</body>
</html>

EdmondsM · EdmondsM

Thanks for the replay BSterner, it will all me to select a dropdown box item. However, the checkboxes become unselected when others are selected. Did I miss someing??

BSterner · BSterner

I assumed you wanted only the checkbox bound to the drop-down menu checked. If
that's not the case, just lose the js loop below code.

for (var i=0; i < target.length; i++)
{
if (target)
{
target.checked = false;
}
}

Also, get rid of the "if (target)" conditional check. So, you're final code
would look like.


<script language="javascript">
function bindToCheckbox(index)
{
document.myForm.myCB[index-1].checked = true;
}
</script>

Make sense?

for (var i=0; i < target.length; i++)
{
if (target)
{
target[i].checked = false;
}
}

bind a cfselect to a check box

Thread Tools

Display

bind a cfselect to a check box

Similar Questions and Discussions

Can we bind the values from cfselect to display thoseinto cfinput text boxes.

CFSELECT HELP!

cfselect options dependent on choice from other cfselect

Bind cfselect to another cfselects index

CF7 BIND CFSELECT to populate a 2nd & 3rd CFSELECT

Re: bind a cfselect to a check box

Re: bind a cfselect to a check box

Re: bind a cfselect to a check box

Posting Permissions