jquery 如何获取asp.net控件 CheckBoxList 中 选中的值？

Posted 2023-05-13

前台html页面代码
<asp:CheckBoxList ID="brand" runat="server" Height="30px"></asp:CheckBoxList>
后台绑定代码：
BLL.BrandBLL bll = new BLL.BrandBLL();
IList<Model.BrandInfo> brandlist = bll.GetBrandList();
brand.DataValueField = "TName";
brand.DataTextField = "TName";
brand.DataSource = brandlist;
brand.DataBind();

请问，前台如何通过jquery 获取CheckBoxList 中选中的值？

参考技术A 如果给CheckBoxList给一个ID值
$("#checkall:checked").each(function()
$(this).val();
);追问

谢谢您！我测了一下不行，我实现的效果是通过点击一个按扭，获取这个控件中选中的值

追答

首先你运行的时候 看看源文件找到这个CheckBoxList 的ID
然后在你点击的时候
$("#CheckBoxListID :checked").each(function ()
alert($(this).val());
);
这儿的:checked 和前面是有分开一点滴

追问

恩，这样能将选中的值输出，但是为什么，输出的值都是 on 呢？这与后台绑定的值一点都不匹配

追答

alert($(this).next().text()); 你用这个试试

可能是你用服务器原因 生成源代码的时候 会生成一个label 只有那个label里面有值

本回答被提问者和网友采纳 参考技术B 把程序运行后，用浏览器右击查看源文件(因为.net程序运行后会把asp的控件转化为html控件),
看看checkBoxLIst 在网页上的是什么样的,然后再用
jquery对
checkboxlist进行取值; 参考技术C $("#CheckBoxListID :checked")
其中CheckBoxListID 你有没有获取客户端ID，写成这样<%=brand.ClientID%> 参考技术D $('#id input[type=checkbox]:selected').each(function()alert($(this).val();));追问

谢谢你！我测了一下，没有输出值，而且我想要实现的是点击一个按扭，然后获取该控件中选中的值。

第5个回答  2012-10-17 ($brand).vaule

Jquery，在用户控件中获取标签值

【中文标题】Jquery，在用户控件中获取标签值

【英文标题】：Jquery, get label value inside a user control

【发布时间】：2012-05-23 19:49:05

【问题描述】：

我需要在 asp.net 页面中使用来自用户控件标签的值进行计算。

用户控件标签为：

 <asp:Label ID="LblInvoicePriceValue" runat="server" ></asp:Label>

我这样包含它：

<Controls:VehicleInformation ID="VehicleInformationControl" runat="server" />

我的 jquery 函数类似于： 请参阅第 1 点和第 2 点。

<script type="text/javascript">
        $(document).ready(function () 
            alert('call function to do calculation here');
            // 1.   Find in the vehicle information user control the invoiced ammount label
            // 2.   Find the vat excluded value **after** it was typed in the textbox
            // 3.   If invoiced ammount is greater than zero, then
            // 3.a  Find Label Percentage 
            // 3.b  Label.Text = (AmmountWithoutVat/InvoicedAmmount)*100 + '%'
        );
  </script>

生成的 HTML：UPdate1

对于标签：

 <span id="MainContent_VehicleInformationControl_LblInvoicePriceValue" class="bold"></span>

对于文本框：

<input name="ctl00$MainContent$TxtVatExcluded" type="text" id="TxtVatExcluded" class="calculation" />

更新 2：

<script type="text/javascript">
        $(document).ready(function () 
            alert('call function to do calculation here');

            $("#TxtVatExcluded").keypress(function() 
                var invoiceprice = $("#MainContent_VehicleInformationControl_LblInvoicePriceValue").text();
                var vatexcluced = $("#TxtVatExcluded").val();
                var lblPercentage = $("#MainContent_LblPercentage");
                if (invoiceprice > 0) 
                    lblPercentage.text((vatexcluced / invoiceprice) * 100);
                
            )

            // 1.   Find in the vehicle information user control the invoiced ammount label
            // 2.   Find the vat excluded value after it was typed in the textbox
            // 3.   If invoiced ammount is greater than zero, then
            // 3.a  Find Label Percentage 
            // 3.b  Label.Text = (AmmountWithoutVat/InvoicedAmmount)*100 + '%'
        );
  </script>

【问题讨论】：

您能否包含控件/标签生成的实际 HTML 输出（使用视图源就足够了）...

如果您已经阅读了 jQuery 大约一两个小时，这应该不会太难。 $("#theID").val() 将为您提供该 id 的值， $("#theID").blur( function () ) 将让您定义焦点离开该字段时会发生什么（假设theID 是一个输入元素）。

【参考方案1】：

var label_text = $("#MainContent_VehicleInformationControl_LblInvoicePriceValue").text();
$("#TxtVatExcluded").val(label_text);

更新 如果要检查文本字段是否为空白，则只需复制标签，然后使用以下代码

var label_text = $("#MainContent_VehicleInformationControl_LblInvoicePriceValue").text();
var txt = $("#TxtVatExcluded").val();
if(txt.length==0)

  $("#TxtVatExcluded").val(label_text);

【参考方案2】：

您可以使用元素的渲染 ID 来使用 jQuery 获取值

var lbl = $("#MainContent_VehicleInformationControl_LblInvoicePriceValue").text();
var tbox = $("#TxtVatExcluded").val();

稍后当计算完成后，您可以将标签文本更新为

$("#MainContent_VehicleInformationControl_LblInvoicePriceValue").html("new label");

更新：

要使用用户输入的逻辑，您必须将函数绑定到keypress/keyup/keydown 事件

$("#myinputbox").keypress(function() 
    var lbl = $("#MainContent_VehicleInformationControl_LblInvoicePriceValue").text();
    var tbox = $("#TxtVatExcluded").val();
    //... so on

更新 2：

由于您尝试使用这些值进行计算，因此首先确保有数字会更安全。为此，您可以根据需要使用parseInt()、parseFloat()。

        $("#TxtVatExcluded").keypress(function() 
            var invoiceprice = $("#MainContent_VehicleInformationControl_LblInvoicePriceValue").text();
            var vatexcluced = $("#TxtVatExcluded").val();
            var lblPercentage = $("#MainContent_LblPercentage");
            if (invoiceprice > 0) 
                lblPercentage.text((parseInt(vatexcluced) / parseInt(invoiceprice)) * 100);
            
        )

【讨论】：

以及如何让我的逻辑仅在用户在文本框中输入内容后才执行

【参考方案3】：

这将为您获取标签控件的值：

function Calculate()

    var InvoicedAmmount = $("#MainContent_VehicleInformationControl_LblInvoicePriceValue").text();
    var AmmountWithoutVat = $("#TxtVatExcluded").val();

    var Result = (AmmountWithoutVat/InvoicedAmmount)*100

    $("#OutputLabel").html(Result + " %");

您可以将 onBlur 事件附加到您的文本框，以便在他们离开文本框时触发您的计算 - 您真的不想在他们输入时重新计算金额。

$(document).ready(function () 
 
    $("#TxtVatExcluded").bind("blur",function() Calculate(); );