How to handle checkbox (dynamically generated) checkchange event using JQuery

Question

4.00/5 (1 vote)

See more:

Using this following code checkbox dynamically generate inside a datalist

XML

<asp:DataList runat="server" ID="DataList2" RepeatDirection="Vertical">
        <ItemTemplate>
        <table width="290px">
            <tr>
                <td align="left" width="200px"><asp:CheckBox ID="chkBttn" CssClass="chck_btn" ToolTip='<%# Eval("OptionalServicesDetails")%>' Text='<%# Eval("OptionalServicesName")%>' Checked="false" runat="server" OnCheckedChanged="CheckBox_CheckedChanged1" AutoPostBack="true" /></td>
                <td align="right" width="90px"><strong> <asp:Label ID="ExtraPrice" Text='<%# "+Rs"+ Eval("Price")+".00"+" "+Eval("OptionalServicesDetailsExtra") %>' runat="server"></asp:Label></strong> </td>
            </tr>
        </table>

        </ItemTemplate>
        </asp:DataList>

using OnCheckedChanged event checkbox value can be received in the server end, but if the same thing i want to do using JQuery ie send checkbox value from client side to server end using JQuery is that possible? if yes then how is that?

Please share your view.
Thanks in advance.

Posted 17-Jan-14 17:55pm

sahabiswarup

Updated 19-Jan-14 18:56pm

v2

Add a Solution

Comments

Karthik_Mahalingam 18-Jan-14 0:04am

yes it can be done in jquery, but why do you complicate it ??

sahabiswarup 18-Jan-14 0:06am

because in this present condition while select the checkbox updateprogress panel comes and its takes few times to refresh the update panel; so i think if i use JQuery process will work a bit faster without much loading time.
Am i wrong?

Karthik_Mahalingam 18-Jan-14 2:24am

always reply to the user, then only they will get notified ..

Karthik_Mahalingam 18-Jan-14 2:26am

what action your are doing on the checkbox cick ??

sahabiswarup 18-Jan-14 3:51am

while checkbox is clicked its value has forwarded to the server end.

Karthik_Mahalingam 18-Jan-14 3:55am

after that it will render something on the screen ??

sahabiswarup 20-Jan-14 0:19am

Here i found one code which works for the first time checkbox is checked, doesn't work next click
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function () {
//set initial state.

$('#MainContent_chkBttn').change(function () {
if ($(this).is(":checked")) {
var returnVal = confirm("hello Checkbox checked");
$(this).attr("checked", returnVal);
}

});
});</script>

Murali Gowda 20-Jan-14 1:09am

As the check box is generated dynamically change event won't be fired, so in the example you have got instead of .change use .on or .live event. As .on or .live will attach events to dynamically created elements.

I'm just altering your above code,
<script type="text/javascript">
$(document).ready(function () {
//set initial state.

$('#MainContent_chkBttn').on("change", function () {
if ($(this).is(":checked")) {
var returnVal = confirm("hello Checkbox checked");
$(this).attr("checked", returnVal);
}

});
});</script>

Hope this helps..

Karthik_Mahalingam 20-Jan-14 1:45am

check my solution...

arindamrudra 20-Jan-14 1:00am

From client side to server side for passing the value, either you have to submit the form or you have to fire an ajax call and both can be done by using the jquery.

sahabiswarup 20-Jan-14 1:08am

that i know, can you please share some example?

Karthik_Mahalingam 20-Jan-14 1:10am

ok wait i wil post the solution. in few mins..

2 solutions

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

JitendraSahu · Answer 1 · 2014-01-19T19:08:00

Hi,

If you want to handle CheckBox change event using jquery then there is no need to do Postback and any postback method as you used in your code

HTML

OnCheckedChanged="CheckBox_CheckedChanged1" AutoPostBack="true"

remove above code.

Below is the changed code

ASP.NET

<asp:datalist runat="server" id="DataList2" repeatdirection="Vertical" xmlns:asp="#unknown">
        <itemtemplate>
        <table width="290px">
            <tr>
                <td align="left" width="200px"><asp:checkbox id="chkBttn" cssclass="chck_btn" tooltip="<%# Eval("OptionalServicesDetails")%>" text="<%# Eval("OptionalServicesName")%>" checked="false" runat="server" onclick="return DoOperation(this)" /></td>
                <td align="right" width="90px"> <asp:label id="ExtraPrice" text="<%# "+Rs"+ Eval("Price")+".00"+" "+Eval("OptionalServicesDetailsExtra") %>" runat="server"></asp:label> </td>
            </tr>
        </table>
 
        </itemtemplate>
        </asp:datalist>

below is the JS code

Java

function DoOperation(cntr)
{
// cntr is your checkbox var on which user clicked 
// do your operation
}

Karthik_Mahalingam · Answer 2 · 2014-01-19T19:45:00

try like this..

create a hidden button on the screen and some hidden fields to read the row values.
on change of the check box in the client side ( javascript) you can read the row values and assign in the hidden fields
and you can read the same in the server in the button click event...

XML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="jquery-1.10.2.js" type="text/javascript"></script>
    <script language="Javascript">
        var change = function (thisctrl) {
            document.getElementById('hdnfldName').value = thisctrl.nextSibling.innerHTML;
            document.getElementById('hdnfldChecked').value = thisctrl.checked;
            document.getElementById('btnHidden').click();

        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:DataList runat="server" ID="DataList2" RepeatDirection="Vertical">
        <ItemTemplate>
            <table width="290px">
                <tr>
                    <td align="left" width="200px">
                        <asp:CheckBox ID="chkBttn" CssClass="chck_btn" Text='<%# Eval("OptionalServicesName")%>'
                            onclick="change(this)" Checked="false" runat="server"  />
                    </td>
                </tr>
            </table>
        </ItemTemplate>
    </asp:DataList>
    <asp:Button ID="btnHidden" runat="server" Style="visibility: hidden" OnClick="btnHidden_Click" />
    <asp:HiddenField runat="server" ID="hdnfldName" Value="" />
    <asp:HiddenField runat="server" ID="hdnfldChecked" Value="" />
    </form>
</body>
</html>

C#

protected void btnHidden_Click(object sender, EventArgs e)
{
    string currentItem = hdnfldName.Value;
    bool currentItemCHeked =  Convert.ToBoolean( hdnfldChecked.Value);
}

How to handle checkbox (dynamically generated) checkchange event using JQuery

2 solutions

Solution 2

Solution 3

Add your solution here

Preview 0

How to handle checkbox (dynamically generated) checkchange event using JQuery

2 solutions

Solution 2

Solution 3

Add your solution here

Preview 0

Existing Members

...or Join us