为选中的每个复选框创建隐藏输入

Create hidden input for each checkbox that is checked

本文关键字：复选框 创建 隐藏 输入      更新时间：2024-03-09

我正试图在表单中为选中的每一行创建一个隐藏输入，并希望使用隐藏列中的id插入每个隐藏输入的值。

以下是我目前所拥有的：

.on('check.bs.table check-all.bs.table', function (row) {           
        var selects = $('#users-table').bootstrapTable('getSelections');
            ids = $.map(selects, function (row) {
                return row.id;                          
            });                 
                    var input = document.createElement("input");
            input.setAttribute('type', 'hidden');           
            input.setAttribute('name', 'delete['+ids+']');
            input.setAttribute("id", 'delete['+ids+']');            
            input.setAttribute('value', 'delete['+ids+']');         
            //append to form element that you want .
            document.getElementById("deleteModalForm").appendChild(input);  
        })

它为每个被选中的框创建一个新的隐藏输入，就像我希望的那样，但我遇到的问题是它将id连接在一起。下面是一个正在发生的事情的例子：

<input value="delete[3]" id="delete[3]" name="delete[3]" type="hidden">
<input value="delete[3,2]" id="delete[3,2]" name="delete[3,2]" type="hidden">

我想让它做的是：

<input value="delete[3]" id="delete[3]" name="delete[3]" type="hidden">
<input value="delete[2]" id="delete[2]" name="delete[2]" type="hidden">

如果它有帮助，我正在使用引导数据表

有人能帮我做这个吗？

编辑：这是一个JSFiddle。当您选中该框时，它将添加一个新的输入，您将看到每个输入都与数字相连。在这个例子中，我没有使用type="hidden"

为什么不直接使用row.stargazers_count？

row是当前所选行的对象，row.stargazers_count表示data-field='stargazers_count'列的行值。

input.setAttribute('value', 'delete['+row.stargazers_count+']');

演示

getSelections做同样的工作，但它将所有选定的行放入对象中，因此您必须提取最后一行：

var selects = $table.bootstrapTable('getSelections');
var stars   = selects[selects.length-1].stargazers_count;
input.setAttribute('value', 'delete['+stars+']');

但这是对数组不必要的操作，因为您手头有一个row，出于这个目的，您将它传递给事件：

.on('check.bs.table', function (e, /* here it is: */ row){

您的代码有更多问题：

  • 这不会起作用，因为你重复输入名称：

    input.setAttribute('name', 'delete['+row.stargazers_count+']');

    使用此选项，它将在提交时自动创建名称数组：

    input.setAttribute('name', 'delete[]');

  • 这也不起作用，因为你重复输入id（它们必须是唯一的）：

    input.setAttribute("id", 'delete['+row.stargazers_count+']');

    改为使用row.id：

    input.setAttribute("id", 'delete_'+row.id);

为什么要把id连在一起？

.map()将数组或对象中的所有项转换为新的项数组。

参考

我使用stars.pop() 获得了最多的star

更新的代码

 .on('check.bs.table', function (e, row) {
        var selects = $table.bootstrapTable('getSelections');
            stars = $.map(selects, function (row) {
                return row.stargazers_count;                          
            }); 
            stars = stars.pop();
            var input = document.createElement("input");
            input.setAttribute('type', 'text');           
            input.setAttribute('name', 'delete['+stars+']');
            input.setAttribute("id", 'delete['+stars+']');            
            input.setAttribute('value', 'delete['+stars+']');         
            //append to form element that you want .
            document.getElementById("deleteModalForm").appendChild(input);  
        $result.text('Event: check.bs.table');
    })

工作Fiddle

相关文章：