如何使用JQuery处理复选框(动态生成的)checkchange事件 [英] How to handle checkbox (dynamically generated) checkchange event using JQuery

查看:75
本文介绍了如何使用JQuery处理复选框(动态生成的)checkchange事件的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

使用以下代码复选框在数据列表中动态生成



Using this following code checkbox dynamically generate inside a datalist

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





使用OnCheckedChanged事件复选框值可以在服务器端接收,但如果我想用JQuery做同样的事情,即使用JQuery从客户端向服务器端发送复选框值是可能的吗?如果是,那怎么回事?



请分享您的看法。

提前致谢。



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.

推荐答案





如果你想使用jquery处理CheckBox更改事件,那么就不需要像你使用的那样做Postback和任何回发方法在你的代码中

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
OnCheckedChanged="CheckBox_CheckedChanged1" AutoPostBack="true" 





删除上面的代码。



以下是更改的代码



remove above code.

Below is the changed code

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





以下是JS代码



below is the JS code

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


试试这样..



在屏幕上创建一个隐藏按钮和一些隐藏字段来读取行值。

更改客户端(javascript)中的复选框可以读取行值并在隐藏字段中分配

然后你就可以了在按钮点击事件中在服务器中进行相同的广告...





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


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













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


这篇关于如何使用JQuery处理复选框(动态生成的)checkchange事件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆