如何使用（数据值属性）传递多个复选框值

Posted 2023-04-13

【中文标题】如何使用（数据值属性）传递多个复选框值

【英文标题】：How to pass multiple check box value using (data-value attribute)

【发布时间】：2019-04-10 11:59:56

【问题描述】：

你好，程序员朋友们，

如何使用 data-value 属性传递多个复选框值，以便在单击删除按钮时使用公共 ActionResult（列表项）设法通过控制器传递它。

CSHTML：

 @foreach (var item in Model.ReportTrfPendingList)
                
                <tr>
                    <td><input type="checkbox" data-value="@item.trfbch"/></td>
                    <td>@item.trfpon</td>
                    <td>@item.dptnam</td>
                    <td>@item.trfbch</td>
                    <td><button type="button" class="btn btn-primary deleteBtn" data-value="@item.trfbch">Delete</button></td>

                    <td>@CultureInfo.CurrentCulture.DateTimeFormat.GetMonthName(Convert.ToInt32(@item.trfsdt.Value.ToString().Substring(2, 2)))&nbsp; @item.trfsdt.Value.ToString().Substring(4, 2)&nbsp;&#44; @DateTime.Now.Year.ToString().Substring(0, 2)@item.trfsdt.Value.ToString().Substring(0, 2)</td>



                </tr>

                
            </tbody>

脚本：

   $("#SelectDeleteBtn").click(function () 

    ---< Processing events here > ---

);

控制器：

     [HttpPost]
    public ActionResult SelectedTransferNoDeletion(List<string> items, string deletionNotes) 

        foreach (var transferNo in items)
        

            var result = deletePendingSrv.SaveDeletionPending(transferNo, SessionUserInfo.Username, deletionNotes);

        
        return Json(BaseVariable.DEFAULT_SUCCESS);


    

查看：

使用数据值属性选择多个复选框值。

【问题讨论】：

您想在一次操作中回发data-value="@item.trfbch" 生成的所有值吗？

是的。 @StephenMuecke。 “item.trfbch”已经通过我的视图模型显示。

deletionNotes 是从哪里来的？ （您只需要获取所有选中的复选框（$('input[type="checkbox"]:checked')），然后您就可以遍历它们以读取值）

@StephenMuecke 删除注释来自我的模态。单击所选按钮时。模态会出来。并且文本区域将从模态本身出现。 SelectedDeleteBtn

【参考方案1】：

您可以使用 javascript 事件监听器将 data-value 的值添加到数组中，然后您只需将该数组作为参数传递给控制器​​。

简单的解决方案是这样的

 @foreach (var item in Model.ReportTrfPendingList)
            
            <tr>
                <td><input type="checkbox" onClick="checkBoxOnClicked()" data-value="@item.trfbch"/></td>
                <td>@item.trfpon</td>
                <td>@item.dptnam</td>
                <td>@item.trfbch</td>
                <td><button type="button" class="btn btn-primary deleteBtn" data-value="@item.trfbch">Delete</button></td>

                <td>@CultureInfo.CurrentCulture.DateTimeFormat.GetMonthName(Convert.ToInt32(@item.trfsdt.Value.ToString().Substring(2, 2)))&nbsp; @item.trfsdt.Value.ToString().Substring(4, 2)&nbsp;&#44; @DateTime.Now.Year.ToString().Substring(0, 2)@item.trfsdt.Value.ToString().Substring(0, 2)</td>



            </tr>

            
        </tbody>


  <script>
    var selectedValues = []
    function checkBoxOnClicked(e)
       var value = e.target.getAttribute("data-value");
       if(selectedValues.includes(value)) // ES6 or selectedValues.indexOf(value) >= 0 // older browser
          selectedValues.pop(value);
       
       else 
          selectedValues.push(value);
       
    
  </script>

【讨论】：

取消选中复选框时添加值（如果多次选中或取消选中，则会多次添加相同的值）

【参考方案2】：

您需要遍历每个选中的复选框并根据data-value 属性生成一个数组

var items = $('input[type="checkbox"]:checked').map(function () 
    return $(this).data('value');
).get();

您没有在问题中指出deletionNotes 的值来自哪里，但假设它是一个输入，那么

var deletionNotes = $(someElement).val();

然后您可以使用 ajax 将数据发布到您的控制器

$.ajax(
    type: 'post',
    url: '@Url.Action("SelectedTransferNoDeletion")', // assumes its in the same controller
    contentType: 'application/json',
    data: JSON.stringify( items: items, deletionNotes: deletionNotes ),
    dataType: 'json'
    success: function(response) 
        ....
    ,
    ....
);