ASP.NET Checkbox click on label calling click event twice in JQuery

I don't know this is a known issue in Mozilla Firefox browser. When I use ASP.NET checkbox on a web page, it will render as a input control plus label. So, when I click on checkbox or label the click event raises and checkbox  state changes. But, I figured out  a strange behavior. When I click on the label the click event is raising twice when I use JQuery [I didn't try with  javascript]. But, where as when I click on checkbox it is raising click event only once. How to solve this problem? I have tried so many ways to solve the problem. But, didn't success.
I have tried by using type of the control. If type is checkbox then only go inside or just do nothing. When I click on label, it is coming to click event and every time, all lines are executing. I don't know why this is happening. Wheat I understood is, when we click on label then internally it is again generating click event for the checkbox because of the label for attribute. So, take care of it.
And if you find any solution to this problem, please let me know. Read More...

Check/Uncheck all checkboxes in Jquery

This is simple, but want to show you how to get it working in simple and efficient way. Usually we have a parent check box and then some child checkboxes. Depends on the parent check box selection, all the child checkboxes should behave exactly same. So, below is the Jquery function which will do that magic for you.

function CheckUncheckAllCheckBoxes(objID, checkedValue) {
if (objID == null || objID == undefined )
return;

$(objID + " input[type=checkbox]").each(function() {
this.checked = checkedValue;
});
}

If you observe, I am using two parameters for the function named objID and checkedValue. objID is the parameter for knowing which checkbox group or list we need to check or uncheck? Like, on a page we may have many checkboxes and groups or lists. So, we need a way to find out which group or list we need to check or uncheck? For this reason I added a parameter for the function to check only the checkboxes under that ID or Class. Possible values for the objID are

1. #parent Control ID of the element which has the check boxes declared. Example: #ageList
2. .parent control class of the element under which all the check boxes defined. Example: .edit

And second parameter, it is for passing the parent selected check box value. If it is ON, then logic will loop through and set the each checkbox to checked otherwise unchecked.

Usage - How to call this method:
Code for check/Uncheck all in ASP.NET

$("#<%=cbAllStates.ClientID %>").click(function() {
   CheckUncheckAllCheckBoxes("#<%=cblState.ClientID %>", this.checked);
});

Note: cblAllStates is the parent ASP.NET check box which is controlling child. cblState is the asp.net checkboxlist and in our terms child check boxes.

Code for Check/Uncheck all in HTML:

$("#cbAllStates").click(function() {
   CheckUncheckAllCheckBoxes("#divChilds", this.checked);
});

Note: cbAllStates is the parent check box control and divChilds is the division <DIV< tag which has all the child check boxes present in it.

**UPDATED** 06/22/2010
This is the small update for the check/uncheck the all check box depends on the child check box selection. If any of the child check box is unchecked or the all child check boxes are selected then the all check box will toggle depends on it. Below is the work around.

Example:
Code for  Toggling the all check box depends on the child check boxes:

function ToggleSelectAllCheckBox(allCheckBox, checkedValue, obj) {
    if (allCheckBox == null || allCheckBox == undefined)
        return;
    if (!checkedValue) 
        $(allCheckBox).attr("checked", false);
    else {
        var areAllChecked = true;
        $(obj + " input[type=checkbox]").each(function() {
            if (!this.checked) {
                areAllChecked = false;                
            }
        });
        $(allCheckBox).attr("checked", areAllChecked);
    }
}

In the above function param1 is the all child check boxes, param2 is the current child check box selection and param3 is the all check box selector.

How to use:
ASP.NET Checkbox list:

$("#<%=cblAge.ClientID %> input[type=checkbox]").click(function() {
                ToggleSelectAllCheckBox("#<%=cbAllAges.ClientID %>", this.checked, "#<%=cblAge.ClientID %>");
 });

Note: cblAges is the check box list id and the cblAge is the all check box for the age group. So, the click event is for the all check boxes inside the check box list.

HTML Check boxes:

$(".ageGroup  input[type=checkbox]").click(function() {
                ToggleSelectAllCheckBox(".ageGroup", this.checked,  "#allAgeCheckbox");
 });

Note: ".ageGroup" is the div or some parent element which holds all the checkboxes in HTML. "#allAgeCheckbox" is the id of the all checkbox for that age group.

**End of Update**

Hope this will help you to understand how to write code in efficient way and which helps for us in multiple scenarios. Always welcome your valuable comments. Read More...

ASP.NET Checkboxlist get values in client side [JQuery]

See my other post, which explains "how to set the value attribute for a single check box through c# code" before proceed to this post.

I know, this is the question most of the ASP.NET developers will ask or look for an answer on why there is no value attribute set for check box when it generates from the ASP.NET checkbox list? Where as the Radio button list, Drop down list and other controls has this value attribute set when you set the data source for them. But why there is no value attribute set for check box list control. Below is the nice explanation and will help you to understand the concept well.

If we assign some data source to the check box list control, then the HTML output is with two controls for each check box as input control with type checkbox and another is label with the text. So, This is the problem. How to get the value of the checkbox in client side using some javascript library? Here we need to think a way of how to set a attribute which holds the value for each checkbox and how to get it.

Below is the solution I found. In your C# code, after you bind the data source for the checkbox list, then need to add extra piece of code below to get our problem solved.

C# code:

foreach (ListItem li in checkBoxList.Items)
li.Attributes.Add("someValue", li.Value);

So, What happening here is, I am just adding extra attribute "someValue" for each check box in a check box list[checkBoxList] and looping through them and assign the actual value to that custom attribute. So that HTML for each checkbox on the page will render like this.

HTML rendered output:

Testing

If you observe, there is an extra parent control for each check box control named <SPAN> with the attribute we have set in c# code for each checkbox. Now you have some value set with each checkbox and you can get it on client side easily. [There is no change in C# code accessing values.]

How to access the values on client side?

I am using JQuery, so I will give an example of how to get the values using the JQuery.

To get all checkboxes which are checked under a checkbox list are accessed as follows.

JQuery code:

$("#<%=checkBoxList.ClientID %> input[type=checkbox]:checked").each(function() {
var currentValue= $(this).parent().attr('someValue');
if(currentValue != '')
values += currentValue + ",";
});

So, values is the string which holds all the selected checkbox values in a check box list which are selected with comma separated. I think, now you got an idea of how to access the values in client-side. Hope it will help you to understand what I am trying to say. Please add your valuable comments on it.

Read More...

input Checkbox or Radio button with runat server and checked property

Usually, when we actually don’t need of ASP.NET controls, we will use HTML control with runat="sever" for better processing. So, if you use the input checkbox/radio button control, it has the checked attribute, by default it look for the value "checked" for checked attribute in HTML. But because we made it server-side control by adding runat="sever" to it, it won't allow the "checked" value to "checked" attribute. The possible values for it is only True or False.

<input type="radio" runat="server" id="radioTech" checked="true" />

So, instead of "checked" value, use true or false.

Read More...

Checkbox and Checkbox list "value" attribute

In some projects, I need to create ASP.NET controls and HTML controls on a web page and need to get the values of the controls with Request.Form[] method. Because this is the only way we can take the values of HTML controls when they are not declared with runat=server. [You take a look at my other post which explains how to take values of HTML controls in c#.] When I declare ASP.NET checkbox on a page, the value Request.Form["checkboxname"] always returns on or off. So, I never get the value of it. Because the ASP.NET checkbox don't have attribute for Value. So this is the same problem with <asp:CheckboxList> control. When I bind the data source for it, on the page it renders as two controls for each check box. One is Input with type checkbox and another is Label which holds the value as display text. So when I try to get the value I never get the check box value at all. i.e. if I declare checkboxlist for showing check boxes as ASP.NET, SharePoint, Java and want to know the value of user selection  by using Request.Form[], I always get the value on or off but not actual strings. So, how to get the value from the checkbox?

In these type of scenarios, I never use <asp:checkboxlist> on my web page. I always use multiple check boxes as a list to render on the page. This is because of getting the value in the Request.Form[""].

We need to declare a checkbox on the page and then use the below  line in c# code as shown below to set the value attribute manually.

cb.InputAttributes.Add("value", "checkboxvalue");

[If you need to build the checkboxes dynamically, then in for loop you can write the string which has the HTML check box declaration with input type="checkbox” and can access them in C# code.] So that it will render the value attribute for it. InputAttribute is the function we need to use to render it. So the final out put which render on the browser side looks like this.

<input type="checkbox" id="cb" name="cb" value="checkboxvalue" />

So, now when you try to get the checkbox value using

Request.Form["cb"] you will get the original value instead of the on or off.

And see my other post related to it, which explains you on "how to access the checkbox list values on client side".

Hope this will help to the guys, who are having the same requirements. Please give me your valuable feedback/comments. Do you think, is there any approach which solves the problem in easy way?

Read More...