时间戳

首页 > 解决方案 > 使用带有 $.each 的 Ajax 获取复选框的值

javascript - 使用带有 $.each 的 Ajax 获取复选框的值

问题描述

一个小问题，我认为我非常接近目标。

我正在尝试检索来自已检查数组的所有复选框的值，以便将这些值发送到我的控制器。（这允许用户选择或不选择某些选项）。

我快到了，我只是无法在我的 int 表中获得所需的值。

我想将 int 值“@ stuff.SubEvent_Zkp”放入这个 int 数组中，但目前 .val () 将 0 作为发送到我的控制器的所有复选框中的值（以及 ajax 调用中）。

我仍然指定 # stuff.SubEvent_Zkp 具有唯一值。

我尝试使用 data [0] 和 attr () ，但这似乎不起作用。

带有复选框的表格

                <tbody>
                    @foreach (var stuff in Model._Registration_SubEvents)
                    {
                        <tr>
                            <td class="col-md-3">@stuff.SubEvent_Name</td>
                            <td class="col-md-1">@stuff.SubEvent_Date.ToShortDateString()</td>
                            <td>@stuff.SubEvent_Fee</td>
                            <td>@stuff.SubEvent_Note</td>
                            <td><input style=" height:17px; width:17px; margin-top:5px; margin-left:22px" type="checkbox" name="CheckSub" id="CheckSub" value="@stuff.SubEvent_Zkp" /></td>
                        </tr>
                    }
                </tbody>

将@stuff.SubEvent_Zkp 的值放入喜爱数组的代码

    $.each($("input[name='CheckSub']:checked"), function () {
        favorite.push($(this).val());
    });

我把最喜欢的数据放在数据中（在ajax调用中）

data: { Id: id, Status: status,Checkin: checkin, Checkout: checkout, Cost: cost, Terms: check1, Info: check2, values: favorite },

标签： javascriptjqueryasp.netajaxmodel-view-controller

解决方案

这是一个简单的用例，我使用数据属性组合在一起，该属性成功地从复选框中检索所有数据属性值并将它们推送到数组中（我在这里使用数据属性，因为它们似乎更恰当地代表了您尝试使用的value属性为了）：

         <table>
            <tr>
                <td class="col-md-3">name</td>
                <td class="col-md-1">date</td>
                <td>fee</td>
                <td>note</td>
                <td><input style=" height:17px; width:17px; margin-top:5px; margin-left:22px" type="checkbox" name="CheckSub" data-checksub="1"  /></td>
            </tr>
            <tr>
                <td class="col-md-3">name</td>
                <td class="col-md-1">date</td>
                <td>fee</td>
                <td>note</td>
                <td><input style=" height:17px; width:17px; margin-top:5px; margin-left:22px" type="checkbox" name="CheckSub" data-checksub="2" /></td>
            </tr>
        </table>

脚本：

var array = [];
$.each($("input[name='CheckSub']"), function () {
    array.push($(this).data("checksub"));
});
//array now contains values 1 and 2

所以你的表格行看起来像：

<tr>
    <td class="col-md-3">@stuff.SubEvent_Name</td>
    <td class="col-md-1">@stuff.SubEvent_Date.ToShortDateString()</td>
    <td>@stuff.SubEvent_Fee</td>
    <td>@stuff.SubEvent_Note</td>
    <td><input style=" height:17px; width:17px; margin-top:5px; margin-left:22px" type="checkbox" name="CheckSub" data-checksub="@stuff.SubEvent_Zkp"/></td>
</tr>

此外，请确保页面上呈现的值不全为 0！

推荐阅读