0

我有一个带有输入复选框的表格。

当用户选择复选框时，我将此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]在数组中有值。如何从中获取所有行信息？我的代码不起作用。任何想法？

4

2 回答 2

1

我创建了一个迭代每个输入的 plunk，读取值并将它们写入数组：

  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 开发工具，您可以观看这个 7 分钟的视频

用一个复选框更新所有人

在我更新的 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>

在这个 plunk 中，复选框的同一 tablerow 中的单元格中的文本被复制到数组中。相关代码是这些行

  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 each 来遍历复选框
  • 如果选中该行的复选框，则将表格行中的单元格文本复制到数组中

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

于 2013-07-13T22:57:50.500 回答
0

看来条件if($(this).val()==selected[i][0].value)不成立。

如果是简单的数组，最后就不需要.value了。简单对比一下selected[i][0]

if($(this).val()==selected[i][0])
于 2013-07-13T22:44:26.883 回答