Is there any reason you wouldnt use a radio button list instead?
Radio buttons work exactly the way you want your "check boxes" to work, meaning they will be easier for you to implement AND the end user won't be confused by check boxes that don't work the way they would expect them to.
Tony Milne is a co-founder of Inlight Media, a leading Australian web development company.
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default2.aspx.vb" Inherits="Default2" %>
<!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" xml:lang="en" lang="en">
<head>
<SCRIPT LANGUAGE="JavaScript">
function checkAll(field,checkbox)
{
var cnt;
cnt =0;
for (i = 0; i < field.length; i++)
if ( field[i].checked == true)
{
cnt = cnt +1;
if(field[i] != checkbox)
field[i].checked = false;
}
if ( cnt != 1 )
{
alert("please select only one checkbox");
}
}
</script>
</head>
<body>
<form name="myform">
<b>Your Favorite Scripts & Languages</b><br>
<input type="checkbox" name="list" value="1" onClick="checkAll(document.myform.list,this)" >Java<br>
<input type="checkbox" name="list" value="2" onClick="checkAll(document.myform.list,this)">Javascript<br>
<input type="checkbox" name="list" value="3" onClick="checkAll(document.myform.list,this)">Active Server Pages<br>
<input type="checkbox" name="list" value="4" onClick="checkAll(document.myform.list,this)">HTML<br>
<input type="checkbox" name="list" value="5" onClick="checkAll(document.myform.list,this)">SQL<br>
<br>
</form>
</body>
</html>
Maulik Patel
MCTS, Software Engineer
Don't forget to click "Mark as Answer" on the post that helped you. This will give you point and help readers to know which post solved your issue and make their search easy.
Public Class CheckBoxDemo
Inherits System.Web.UI.Page
#Region " Web Form Designer Generated Code "'This call is required by the Web Form Designer.
<System.Diagnostics.DebuggerStepThrough()> Private Sub InitializeComponent()
End Sub
Protected WithEvents CheckBoxList1 As System.Web.UI.WebControls.CheckBoxList
'NOTE: The following placeholder declaration is required by the Web Form Designer.
'Do not delete or move it.
Private designerPlaceholderDeclaration As System.Object
Private Sub Page_Init(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Init
'CODEGEN: This method call is required by the Web Form Designer
'Do not modify it using the code editor.
InitializeComponent()
End Sub
#End Region
Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
'Put user code to initialize the page here
CheckBoxList1.Attributes.Add("onclick", "return HandleOnCheck()")
End Sub
End Class
CheckBoxDemo.js
var
objChkd;
function HandleOnCheck()
{
var chkLst = document.getElementById('CheckBoxList1');
I got the same problem like you but i didnt get solution from this forum.can you plz paste your code how you done exactly for your example.It is exactly same example.It would help me a lot if you paste your code here which is working for this senerio.My
code is same like below...
Just paste your code what you have done to make this work.Expecting a quick response from you.Thanks in advance.
Note that I attached event handlers to the element in the HTML declaration. This will work, but will produce a compiler warning. The proper way to do this for a server control is in the Page_Load handler of the server-side code like this:
CheckBoxList1.Attributes.Add("previousChecked", "-1");
CheckBoxList1.Attributes.Add("onclick", "checkBoxListOnClick(this);");
I am having like 12 checkbox lists like above checkboxlist and i used ur code for each and every one like below in my ASPX PAGE . MY PAGE IS IN MASTERPAGE.(content place holder in it)
var objChkd1;
function HandleOnCheck1()
{
var chkLst = document.getElementById('ChkBoxList1');
if(objChkd1 && objChkd1.checked)
objChkd1.checked=
false;objChkd1 =
event.srcElement;}
var
objChkd2;
function HandleOnCheck2()
{
var chkLst = document.getElementById('ChkBoxList2');
if(objChkd2 && objChkd2.checked)
objChkd2.checked=
false;objChkd2 =
event.srcElement;}
var
objChkd3;
function HandleOnCheck3()
{
var chkLst = document.getElementById('ChkBoxList3');
if(objChkd3 && objChkd3.checked)
objChkd3.checked=
false;objChkd3 =
event.srcElement;}
var objChkd4;
function HandleOnCheck4()
{
var chkLst = document.getElementById('ChkBoxList4');
if(objChkd4 && objChkd4.checked)
objChkd4.checked=
false;objChkd4 =
event.srcElement;}
var objChkd5;
function HandleOnCheck5()
{
var chkLst = document.getElementById('ChkBoxList5');
if(objChkd5 && objChkd5.checked)
objChkd5.checked=
false;objChkd5 =
event.srcElement;}
var objChkd6;
function HandleOnCheck6()
{
var chkLst = document.getElementById('ChkBoxList6');
if(objChkd6 && objChkd6.checked)
objChkd6.checked=
false;objChkd6 =
event.srcElement;}
var objChkd7;
function HandleOnCheck7()
{
var chkLst = document.getElementById('ChkBoxList7');
if(objChkd7 && objChkd7.checked)
objChkd7.checked=
false;objChkd7 =
event.srcElement;}
var objChkd8;
function HandleOnCheck8()
{
var chkLst = document.getElementById('ChkBoxList8');
if(objChkd8 && objChkd8.checked)
objChkd8.checked=
false;objChkd8 =
event.srcElement;}
var objChkd9;
function HandleOnCheck9()
{
var chkLst = document.getElementById('ChkBoxList9');
if(objChkd9 && objChkd9.checked)
objChkd9.checked=
false;objChkd9 =
event.srcElement;}
var objChkd10;
function HandleOnCheck10()
{
var chkLst = document.getElementById('ChkBoxList10');
if(objChkd10 && objChkd10.checked)
objChkd10.checked=
false;objChkd10 =
event.srcElement;}
var objChkd11;
function HandleOnCheck11()
{
var chkLst = document.getElementById('ChkBoxList11');
if(objChkd11 && objChkd11.checked)
objChkd11.checked=
false;objChkd11 =
event.srcElement;}
var objChkd12;
function HandleOnCheck12()
{
var chkLst = document.getElementById('ChkBoxList12');
if(objChkd12 && objChkd12.checked)
I dont know why it is showing error OBJECTED EXPECTED ALLTHE WAY BOTTOM OF THE PAGE EVERY TIME IN IE 6.
Please help me in this.
This i sentirely different problem hope you can help me easily.
I have a checkbox and a textbox in my masterpage
if the checkbox is checked the textbox should not be empty.
I also tryed to catch the value of checkbox and control the textbox accordingly when the user clicks on button (added that function to onclick of button )but it is not working. Also i observed that i am not able to get the value of the checkbox to the javascript
function in masterpage. That is the issue i think.
Probably because objChkd1, objChkd2, etc are never set that I can see. I posted complete and concise working code. I don't understand why you would consider using that spaghetti code that you posted that also won't work.
I solved the second problem (Checkbox and textbox)
function CheckAll(a)
{
var txtBoxClientId = document.getElementById('<%= txtExplain.ClientID %>');
if (a.checked ==
true){txtBoxClientId.disabled=true;}
}
in page load
chkOther.Attributes.Add(
"onclick",
"Check(this);");
I didnt get solution for the first problem....
Can any one suggest me with the best solution that takes care alll the 12 checkbox lists i am having which are in masterpage and those should be mutually exclusive.
Member
15 Points
52 Posts
mutually exclusive check box list
Aug 11, 2008 01:27 AM|suri_vinod|LINK
Hello,
I have a check box list on page.
I want to make it mutually exclusive using javascript i.e only one item in the check box list should be selected.
When user selects second item, the previously selected item should be deselected.
I want to do this by javascript only.
Vinod
Member
380 Points
52 Posts
Re: mutually exclusive check box list
Aug 11, 2008 01:40 AM|TonyMilne|LINK
Radio buttons work exactly the way you want your "check boxes" to work, meaning they will be easier for you to implement AND the end user won't be confused by check boxes that don't work the way they would expect them to.
Member
15 Points
52 Posts
Re: mutually exclusive check box list
Aug 11, 2008 01:51 AM|suri_vinod|LINK
Thankx for reply.
Yes, I am familiar with radio buttons and they are exactly what i want to do.
My User are very limited, so there is no problem on there end.
I just wanted to do this. Just trying to do something new.
Vinod
Member
380 Points
52 Posts
Re: mutually exclusive check box list
Aug 11, 2008 02:10 AM|TonyMilne|LINK
Hmm, I'd still avoid the idea - but, here's what I would do if you *forced* me to do it ;)
(BTW - I use jQuery, a javascript library that you can download from http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.2.6.min.js ... You will need to download it for my example to work, and just place it in the same location as the HTML file.)
Here's a HTML example:
Tony.javascript
Participant
1854 Points
364 Posts
Re: mutually exclusive check box list
Aug 11, 2008 02:55 AM|Maulik Patel|LINK
You can also try bellow code ..
MCTS, Software Engineer
Don't forget to click "Mark as Answer" on the post that helped you. This will give you point and help readers to know which post solved your issue and make their search easy.
Member
309 Points
82 Posts
Re: mutually exclusive check box list
Aug 11, 2008 03:31 AM|palanisaami|LINK
just add the script -
var
objChkd; function HandleOnCheck(){
var chkLst = document.getElementById('CheckBoxList1'); if(objChkd && objChkd.checked) objChkd.checked=false;objChkd = event.srcElement;}
and register the client event to the 'CheckBoxList1' at the Page_load as
CheckBoxList1.Attributes.Add("onclick","return HandleOnCheck()");
hope this may solve urs problem...
Palanisaami M.S
"Save the Planet Earth"
Member
15 Points
52 Posts
Re: mutually exclusive check box list
Aug 11, 2008 04:01 AM|suri_vinod|LINK
<asp:CheckBoxList ID="chbLeadType" runat="server" RepeatDirection="Horizontal">
<asp:ListItem>Rent</asp:ListItem>
<asp:ListItem>Buy</asp:ListItem>
<asp:ListItem>Sell</asp:ListItem>
<asp:ListItem>Vacancy</asp:ListItem>
</asp:CheckBoxList>
this is the check box list i am using.
Can u explain your code with this.
Thnakx
Vinod
Member
309 Points
82 Posts
Re: mutually exclusive check box list
Aug 11, 2008 04:28 AM|palanisaami|LINK
CheckBoxDemo.js
var
objChkd; function HandleOnCheck(){
var chkLst = document.getElementById('CheckBoxList1');objChkd.checked=
false; objChkd = event.srcElement;}
</form>Palanisaami M.S
"Save the Planet Earth"
None
0 Points
8 Posts
Re: mutually exclusive check box list
Nov 16, 2008 12:31 AM|adi458|LINK
Hi Suri,
Need your help.
I got the same problem like you but i didnt get solution from this forum.can you plz paste your code how you done exactly for your example.It is exactly same example.It would help me a lot if you paste your code here which is working for this senerio.My code is same like below...
Just paste your code what you have done to make this work.Expecting a quick response from you.Thanks in advance.
<asp:CheckBoxList ID="chbLeadType" runat="server" RepeatDirection="Horizontal">
<asp:ListItem>Rent</asp:ListItem>
<asp:ListItem>Buy</asp:ListItem>
<asp:ListItem>Sell</asp:ListItem>
<asp:ListItem>Vacancy</asp:ListItem>
</asp:CheckBoxList>
Very urgent...plz respond.
Member
15 Points
52 Posts
Re: mutually exclusive check box list
Nov 16, 2008 08:38 AM|suri_vinod|LINK
Adi,
put this code in page load..
and then use this javascript
var objChkd;
function HandleOnCheck(){
var chkLst = document.getElementById('CheckBoxList1');objChkd.checked=false;
objChkd = event.srcElement;}
It works fine
Vinod
All-Star
40630 Points
15348 Posts
Re: mutually exclusive check box list
Nov 16, 2008 09:19 AM|NC01|LINK
Try this, though I don't know why you would not just use a RadioButtonList, since that is what the user will expect for mutually exclusive:
<form id="form1" runat="server">
<asp:CheckBoxList id="CheckBoxList1" previousChecked="-1" onclick="checkBoxListOnClick(this);" runat="server">
<asp:listitem Value="1">Item 1</asp:listitem>
<asp:listitem Value="2">Item 2</asp:listitem>
<asp:listitem Value="3">Item 3</asp:listitem>
</asp:CheckBoxList>
</form>
<script type="text/javascript">
<!--
function checkBoxListOnClick(elementRef)
{
var checkBoxArray = elementRef.getElementsByTagName('input');
var previousChecked = elementRef.previousChecked;
if ( previousChecked.length > 0 )
previousChecked = parseInt(previousChecked);
else
previousChecked = -1;
elementRef.previousChecked = '-1';
for (var i=0; i<checkBoxArray.length; i++)
{
var checkBoxRef = checkBoxArray[i];
if ( checkBoxRef.checked == true )
{
if ( i == previousChecked )
{
checkBoxRef.checked = false;
}
else
{
elementRef.previousChecked = '' + i;
}
}
}
}
function windowOnLoad()
{
checkBoxListOnClick(document.getElementById('<%= CheckBoxList1.ClientID %>'))
}
window.onload = windowOnLoad;
// -->
</script>
Note that I attached event handlers to the element in the HTML declaration. This will work, but will produce a compiler warning. The proper way to do this for a server control is in the Page_Load handler of the server-side code like this:
CheckBoxList1.Attributes.Add("previousChecked", "-1");
CheckBoxList1.Attributes.Add("onclick", "checkBoxListOnClick(this);");
NC...
None
0 Points
8 Posts
Re: mutually exclusive check box list
Dec 16, 2008 04:35 PM|adi458|LINK
Hi SURI,
<
asp:CheckBoxList ID="ChkBoxList2" runat="server" RepeatDirection="Horizontal"> <asp:ListItem>Yes</asp:ListItem> <asp:ListItem>No</asp:ListItem> </asp:CheckBoxList>I am having like 12 checkbox lists like above checkboxlist and i used ur code for each and every one like below in my ASPX PAGE . MY PAGE IS IN MASTERPAGE.(content place holder in it)
var objChkd1; function HandleOnCheck1(){
var chkLst = document.getElementById('ChkBoxList1'); if(objChkd1 && objChkd1.checked)objChkd1.checked=
false;objChkd1 = event.srcElement;}var
objChkd2; function HandleOnCheck2(){
var chkLst = document.getElementById('ChkBoxList2'); if(objChkd2 && objChkd2.checked)objChkd2.checked=
false;objChkd2 = event.srcElement;}var
objChkd3; function HandleOnCheck3(){
var chkLst = document.getElementById('ChkBoxList3'); if(objChkd3 && objChkd3.checked)objChkd3.checked=
false;objChkd3 = event.srcElement;} var objChkd4; function HandleOnCheck4(){
var chkLst = document.getElementById('ChkBoxList4'); if(objChkd4 && objChkd4.checked)objChkd4.checked=
false;objChkd4 = event.srcElement;} var objChkd5; function HandleOnCheck5(){
var chkLst = document.getElementById('ChkBoxList5'); if(objChkd5 && objChkd5.checked)objChkd5.checked=
false;objChkd5 = event.srcElement;} var objChkd6; function HandleOnCheck6(){
var chkLst = document.getElementById('ChkBoxList6'); if(objChkd6 && objChkd6.checked)objChkd6.checked=
false;objChkd6 = event.srcElement;} var objChkd7; function HandleOnCheck7(){
var chkLst = document.getElementById('ChkBoxList7'); if(objChkd7 && objChkd7.checked)objChkd7.checked=
false;objChkd7 = event.srcElement;} var objChkd8; function HandleOnCheck8(){
var chkLst = document.getElementById('ChkBoxList8'); if(objChkd8 && objChkd8.checked)objChkd8.checked=
false;objChkd8 = event.srcElement;} var objChkd9; function HandleOnCheck9(){
var chkLst = document.getElementById('ChkBoxList9'); if(objChkd9 && objChkd9.checked)objChkd9.checked=
false;objChkd9 = event.srcElement;} var objChkd10; function HandleOnCheck10(){
var chkLst = document.getElementById('ChkBoxList10'); if(objChkd10 && objChkd10.checked)objChkd10.checked=
false;objChkd10 = event.srcElement;} var objChkd11; function HandleOnCheck11(){
var chkLst = document.getElementById('ChkBoxList11'); if(objChkd11 && objChkd11.checked)objChkd11.checked=
false;objChkd11 = event.srcElement;} var objChkd12; function HandleOnCheck12(){
var chkLst = document.getElementById('ChkBoxList12'); if(objChkd12 && objChkd12.checked)objChkd12.checked=
false;objChkd12 = event.srcElement;}PAGE LOAD i added below code:
chkUsedReplenishment.Attributes.Add("onclick", "CheckAll(this);");ChkBoxList1.Attributes.Add(
"onclick", "return HandleOnCheck1()"); ChkBoxList2.Attributes.Add("onclick", "return HandleOnCheck2()");ChkBoxList3.Attributes.Add(
"onclick", "return HandleOnCheck3()"); ChkBoxList4.Attributes.Add("onclick", "return HandleOnCheck4()");ChkBoxList5.Attributes.Add(
"onclick", "return HandleOnCheck5()"); ChkBoxList6.Attributes.Add("onclick", "return HandleOnCheck6()");ChkBoxList7.Attributes.Add(
"onclick", "return HandleOnCheck7()"); ChkBoxList8.Attributes.Add("onclick", "return HandleOnCheck8()");ChkBoxList9.Attributes.Add(
"onclick", "return HandleOnCheck9()"); ChkBoxList10.Attributes.Add("onclick", "return HandleOnCheck10()");ChkBoxList11.Attributes.Add(
"onclick", "return HandleOnCheck11()"); ChkBoxList12.Attributes.Add("onclick", "return HandleOnCheck12()");Please help me in this.
This i sentirely different problem hope you can help me easily.
I have a checkbox and a textbox in my masterpage
if the checkbox is checked the textbox should not be empty.
I also tryed to catch the value of checkbox and control the textbox accordingly when the user clicks on button (added that function to onclick of button )but it is not working. Also i observed that i am not able to get the value of the checkbox to the javascript function in masterpage. That is the issue i think.
Please help me in finding this out .
Thanks in Advance.
All-Star
40630 Points
15348 Posts
Re: mutually exclusive check box list
Dec 17, 2008 07:27 AM|NC01|LINK
Probably because objChkd1, objChkd2, etc are never set that I can see. I posted complete and concise working code. I don't understand why you would consider using that spaghetti code that you posted that also won't work.
NC...
Member
15 Points
52 Posts
Re: mutually exclusive check box list
Dec 17, 2008 08:59 AM|suri_vinod|LINK
Hello,
Try using $get rather then document.getElementById
Vinod
All-Star
40630 Points
15348 Posts
Re: mutually exclusive check box list
Dec 17, 2008 09:34 AM|NC01|LINK
How could that make a difference? I believe that $get is just the JQuery (or PHP) equivalent of document.getElementById. Is he even using JQuery?
NC...
None
0 Points
8 Posts
Re: mutually exclusive check box list
Dec 17, 2008 10:03 AM|adi458|LINK
HI NC,Suri,
I solved the second problem (Checkbox and textbox)
function CheckAll(a){
var txtBoxClientId = document.getElementById('<%= txtExplain.ClientID %>'); if (a.checked == true){txtBoxClientId.disabled=true;}}
in page load
chkOther.Attributes.Add(
"onclick", "Check(this);");I didnt get solution for the first problem....
Can any one suggest me with the best solution that takes care alll the 12 checkbox lists i am having which are in masterpage and those should be mutually exclusive.