在jquery中使用每个方法

Question

我有一个包含输入复选框的表。

当用户选中复选框时，我将此value属性保存到array ...所以用户点击，检查并取消选中，一段时间后他会按下按钮。

在按钮单击事件中，我正在尝试遍历每个记录，并检查每个input[type="checkbox"]是否与数组中的值相同，所以如果值相同，那么我将读取该行中的所有td值。

这是我的代码：

$('#something').click(function(){
$( "tr td input" ).each(function(index) {
   //selected is an array which has values collected from the checked checkboxes..for example [2,3]
   for(var i=0;i<selected.length;i++)
   {
    if($(this).val()==selected[i][0].value)
    {
            alert($('tr').eq(index).find('td').eq(1).text());
    }
   }
});
});

和HTML代码：

<table>
    <tbody>
    <tr>
        <td><input type="checkbox" value="on"></td>
        <td>ID</td>
        <td>Name</td>
    </tr>
    <tr>
        <td><input type="checkbox" value="0"></td>
        <td>1</td>
        <td>John</td>
    </tr>
    <tr>
        <td><input type="checkbox" value="1"></td>
        <td>2</td>
        <td>Steve</td>
    </tr>
    </tbody>
</table>

例如，如果我在数组中有值[1]。如何从中获取所有行信息？我的代码不起作用。有什么想法吗？

Answer 1

我创建了一个plunk that iterates over each input，读取值并将它们写入数组：

  var checkBoxCollection = new Array();
  var cb = {};

  $("button").click(function(){      

        $("input").each(function(index, el){

          id = $(el).attr("id");
          val = $(el).val();
          isChecked = $(el).is(':checked');
          console.log(index, id, val);
          checkBoxCollection.push({'id': id, 'val': val, 'isChecked': isChecked});
        }); // each
        console.log(checkBoxCollection);
    }); // button.click  

单击按钮后，您可以使用这种方式选择单元格值，并且只需要检查框是否已选中。要了解如何使用控制台和chrome dev tools you may take a look at this 7 minute video

使用所有

的一个复选框进行更新

在我updated plunk中你可以看到我使用了两个不同的选择器

// using different selector - see my comment and tell me if you can not do that
Select all <input class="cbAll" type="checkbox" id="cbAll" value="on">
// and each checkbox like this
<input class="cb" type="checkbox" id="cb0" value="0">

和javascript

  $("input.cbAll").click(function(){
    $("input.cb").each(function(index, el){
      // javascript ternary operator is optional this switches each checked state
      $(el).is(':checked') 
        ? $(el).prop('checked', false)
        : $(el).prop('checked', true);
    }); // each
  });  

更新，包括<td>

内的文本副本

在this plunk the text from the cells in the same tablerow of the checbox is copied进入数组。相关代码是这些行

  isChecked = $(el).is(':checked');
  if(isChecked){
    var cells = $(el).parent().parent().children(); 
    var cellId = cells.eq(1).text();
    var cellName = cells.eq(2).text();
    checkBoxCollection.push({'id': id, 'val': val
              , 'isChecked': isChecked
              , 'cellId': cellId
              , 'cellName': cellName});
    console.log(index, id, val, cellId, cellName);
  }

在屏幕截图中，您可以看到每个选中文本框的值都已复制。

据我所知，我解决了你所有问题：

• 使用jquery逐个迭代复选框
• 如果选中该行的复选框
，则将tablerow中的单元格文本复制到数组中

如果我不完全理解您的问题，请澄清您想知道的内容。

Answer 2

似乎条件if($(this).val()==selected[i][0].value)不正确。

如果它是一个简单的数组，最后你不需要.value。只需与selected[i][0]

进行比较

if($(this).val()==selected[i][0])