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

I am trying to create a hidden input inside of a form for each row that is checked and I want to insert the value of each hidden input with the ids that are from a hidden column.

我试图在每个被检查的行的表单内创建一个隐藏的输入,我想插入每个隐藏输入的值与来自隐藏列的ID。

Here is what i have so far:

这是我到目前为止:

.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);  
        })

It is creating a new hidden input for each box that is checked like I want it to, but the problem I am having is that it is joining the ids together. Here is an example of whats happening:

它正在为我检查的每个盒子创建一个新的隐藏输入,但我遇到的问题是它将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">

What i want it to do is this:

我想要它做的是:

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

If it helps I am using Bootstrap Data Table

如果它有助于我使用Bootstrap数据表

Can someone please help me with this?

有人可以帮我这个吗?

EDIT: Here is a JSFiddle. As you check the box it will add a new input and you will see that each input joins the numbers. For this example I did not use type="hidden"

编辑:这是一个JSFiddle。当您选中该框时,它将添加一个新输入,您将看到每个输入都加入了数字。对于这个例子,我没有使用type =“hidden”

2 个解决方案

#1

Why not just use row.stargazers_count directly?

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

row is an object of currently selected row, row.stargazers_count represents row value of data-field='stargazers_count' column.

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

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

DEMO

getSelections do the same job but it takes all selected rows into object, so that you have to extract the last one :

getSelections执行相同的工作,但它将所有选定的行转换为对象,因此您必须提取最后一行:

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

But it's unnecessary operation on array, since you have a row right on your hand, and for that purposes you're passing it to the event:

但是这对阵列是不必要的操作,因为你手上有一行,为此目的你将它传递给事件:

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

You have more problems with your code:

您的代码有更多问题:

This ain't gonna work, as you repeating inputs names:

当你重复输入名称时,这不会起作用:
```
input.setAttribute('name', 'delete['+row.stargazers_count+']');
```
use this instead, it will create array of names automatically on submit:

使用它,它将在提交时自动创建名称数组:
```
input.setAttribute('name', 'delete[]');
```
This ain't gonna work also, because you repeating inputs id (they have to be unique):

这也不会起作用,因为你重复输入id(它们必须是唯一的):
```
input.setAttribute("id", 'delete['+row.stargazers_count+']');
```
use row.id instead:

请改用row.id:
```
input.setAttribute("id", 'delete_'+row.id);
```

Why it is joining the ids together?

为什么一起加入ID?

.map() Translate all items in an array or object to new array of items.

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

Reference

#2

I took the top most star using stars.pop()

我使用stars.pop()获得了最*的明星

Updated Code

 .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');
    })

Working Fiddle

#1