Question

我的每一行都有一个复选框，如下所示：

<table id='users'>
    <thead>
    ...
    </thead>
    <tbody>
        <tr>
            <td><input type='checkbox' name='users' id='someUserId'></td>
            <td> some variable pid </td>
            <td>...</td>
        </tr>
        <tr>
            <td><input type='checkbox' name='users' id='someOtherId'></td>
            <td> some other variable pid </td>
            <td>...</td>
        </tr>
        ...
    </tbody>
</table>

现在我想将复选框旁边的列文本pid放入一个数组中，然后将数组传递给一个函数。该函数应该获取数组中的每条记录并处理它们。

到目前为止我最好的尝试：

function myFunction(arr[]){...}

function getIds(obj){
var $table = $("#users");
alert($table.attr("id"));
var $cboxes = $table.find("input:checkbox").toArray();
alert($cboxes);

var checkedArray = [];
var pid;
for(i = 0;i < $cboxes.length; i++){
    if($cboxes[i].checked){
        pid = $cboxes.parent().siblings().eq(0).text();
        checkedArray.push(pid);
        alert(pid);
    }
}
alert(checkedArray);
return checkedArray;
}

$("#button").click(function(){
    var ids = getIds();

    for(i = 0; i < ids.length; i++){
        myFunction(ids[i]);
        alert("Function executed for "+ids[i]+".");
    }
});

Answer 1

你可以使用:checked伪选择器和$.map来减轻这种影响。

＆＃13;

function process (id) {
  alert(id);
}
function find () {
  return $('#users').find('input:checkbox:checked').map(function () {
    return $(this).parent().next().text();
  }).toArray();
}

function handle () {
  find().forEach(process);
}

$('#btn').on('click', handle); // Pseudo-event

＆＃13;

<table id='users'>
  <thead>
  </thead>
  <tbody>
    <tr>
      <td><input type='checkbox' name='users' id='someUserId'></td>
      <td> some variable pid </td>
      <td>...</td>
    </tr>
    <tr>
      <td><input type='checkbox' name='users' id='someOtherId'></td>
      <td> some other variable pid </td>
      <td>...</td>
    </tr>
  </tbody>
</table>

<button id="btn">Check!</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

＆＃13;

如果您不想循环两次，则应将逻辑压缩到单个函数链中。这减少了循环，但仍构建阵列供以后使用。

＆＃13;

var myNamespace = {};

function process (id) {
  alert('Single ID: '+ id);
  return id;
}
function find () {
  return $('#users').find('input:checkbox:checked').map(function () {
    return process($(this).parent().next().text());
  }).toArray();
}

function handle () {
  myNamespace.ids = find();
  alert('All IDs: ' + myNamespace.ids)
}

$('#btn').on('click', handle); // Pseudo-event

＆＃13;

<table id='users'>
  <thead>
  </thead>
  <tbody>
    <tr>
      <td><input type='checkbox' name='users' id='someUserId'></td>
      <td> some variable pid </td>
      <td>...</td>
    </tr>
    <tr>
      <td><input type='checkbox' name='users' id='someOtherId'></td>
      <td> some other variable pid </td>
      <td>...</td>
    </tr>
  </tbody>
</table>

<button id="btn">Check!</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

＆＃13;

Answer 2

试试这个：

fiddle

 function getIds() {
     var chk = $("#users").find("input:checkbox");
     var pId = [];

     chk.each(function(){
         pId.push($(this).parent().next().html());
     });

     return pId;
 }

 $(function(){
     getIds().forEach(function(i){
         console.log(i);
     });
 });

查找users表中的所有复选框，创建数组，将所有pId推入数组，然后从函数返回。然后只需循环遍历它们。

返回单击后选中的所有复选框的数组

2 个答案: