mutually exclusive check box list

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.

Reply

suri_vinod

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

Reply

TonyMilne

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:

<html>
	<head>
		<script type="text/javascript" language="javascript" src="jquery-1.2.6.min.js"></script>
		<script type="text/javascript" language="javascript">
			$(document).ready(function() {
				$('#colorOptions input').click(function () {
					
					$('#colorOptions input:checked').each(function () {
						$(this).attr('checked', false);
					});
					
					$(this).attr('checked', true);
				});
			});
		</script>
	</head>
	<body>
		<div id="colorOptions">
			Red: <input id="chkRed" name="chkRed" type="checkbox" value="red">
			Blue: <input id="chkBlue" name="chkBlue" type="checkbox" value="blue">
			Green: <input id="chkGreen" name="chkGreen" type="checkbox" value="green">
		</div><!-- end colorOptions -->
	</body>
</html>

Tony.

Tony Milne is a co-founder of Inlight Media, a leading Australian web development company.

Reply

Maulik Patel

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 ..

<%@ 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.

Reply

palanisaami

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...

regards,
M.S.PalaniSaami.
http://dotnetcurve.wordpress.com/
"Save the Planet Earth"

Reply

suri_vinod

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

Reply

palanisaami

Member

309 Points

82 Posts

Re: mutually exclusive check box list

Aug 11, 2008 04:28 AM|palanisaami|LINK

<%@ Page Language="vb" AutoEventWireup="false" Codebehind="CheckBoxDemo.aspx.vb" Inherits="MySamples.CheckBoxDemo"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
	<HEAD>
		<title>CheckBoxDemo</title>
		<meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
		<meta name="CODE_LANGUAGE" content="Visual Basic .NET 7.1">
		<meta name="vs_defaultClientScript" content="JavaScript">
		<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
		<script language="javascript" src="Scripts/CheckBoxDemo.js"></script>
	</HEAD>
	<body MS_POSITIONING="GridLayout">
		<form id="Form1" method="post" runat="server">
			<asp:CheckBoxList id="CheckBoxList1" style="Z-INDEX: 101; LEFT: 256px; POSITION: absolute; TOP: 208px"
				runat="server">
				<asp:ListItem Value="Palani">Palani</asp:ListItem>
				<asp:ListItem Value="Saami">Saami</asp:ListItem>
				<asp:ListItem Value="Nithi">Nithi</asp:ListItem>
				<asp:ListItem Value="Anandh">Anandh</asp:ListItem>
			</asp:CheckBoxList>
		</form>
	</body>
</HTML>

2.ASPX.VB File

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');

if(objChkd && objChkd.checked)

objChkd.checked=false;

objChkd = event.srcElement;

}

</form>

regards,
M.S.PalaniSaami.
http://dotnetcurve.wordpress.com/
"Save the Planet Earth"

Reply

adi458

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.

suri_vinod

<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

<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>

Reply

suri_vinod

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..

CheckBoxList1.Attributes.Add("onclick", "return HandleOnCheck()")

and then use this javascript

var objChkd;

function HandleOnCheck()

{

var chkLst = document.getElementById('CheckBoxList1');

if(objChkd && objChkd.checked)

objChkd.checked=false;

objChkd = event.srcElement;

}

It works fine

Vinod

Reply

NC01

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:

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...

Reply

adi458

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()");

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.

Please help me in finding this out .

Thanks in Advance.

Reply

NC01

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...

Reply

suri_vinod

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

Reply

NC01

All-Star

40630 Points

15348 Posts

Re: mutually exclusive check box list

Dec 17, 2008 09:34 AM|NC01|LINK

suri_vinod

Hello,

Try using $get rather then document.getElementById

Vinod

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...

Reply

adi458

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.

mutually exclusive check box list [Answered]RSS

15 replies

Shortcuts