javascript - 在 jQuery 中迭代复选框

Question

我有一个带有复选框、下拉列表和其他附带数据的表格。

我想迭代已检查的行，并提取其数据，将该数据添加到字典中，然后添加到主数组中。

它似乎找到了带有复选框的正确行，但我的 for 循环没有正确拉动每一行。这是我的 js 代码:

$("#thechecked").click(function(){
   var send_list = []
   $('#mytable').find(':checkbox:checked').each(function () {
      var dict = {};
      var value = $("#presetChoosen").val();
      var filename = $("#filename").text();
      dict['filename'] = filename
      dict['value'] = value
      send_list.push(dict)

   });
   console.log(send_list)

});

FULL EXAMPLE IN JSFIDDLE

我做错了什么？

Answer 1

您不应该像在 select 元素上那样在任何地方使用相同的 id。 Id 的元素应该是唯一的。

我使用了一些 jQuery 方法(parent()、find()、next())来定位特定值:

var value = $(this).parent().parent().find("select option:checked").val();
var filename = $(this).parent().next("td").text();

下面是您想要实现的目标的工作片段:

$("#thechecked").click(function() {
  var send_list = []
  $('#mytable').find(':checkbox:checked').each(function() {
    var dict = {};
    var value = $(this).parent().parent().find("select option:checked").val();
    var filename = $(this).parent().next("td").text();
    dict['filename'] = filename
    dict['value'] = value
    send_list.push(dict)

  });
  console.log(send_list)

});

tr,
td {
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="mytable">
  <thead>
    <tr id="mq">
      <td><input type="checkbox" /></td>
      <td>What</td>
      <td>Meta</td>
      <td>Preset</td>
    </tr>
  </thead>
  <tbody>
    <tr id="1">
      <td><input type="checkbox" /></td>
      <td id="filename_1">Underthesea</td>
      <td>1920x1080</td>
      <td> <select id="presetChoosen_1">        
                <option value="Watch">Watch</option>
                <option value="Delete">Delete</option>
                <option value="None">None</option>
                <option value="Other">Other</option>
        </select></td>
    </tr>
    <tr id="2">
      <td><input type="checkbox" /></td>
      <td id="filename_2">Overthehill</td>
      <td>1280x720</td>
      <td> <select id="presetChoosen_2" value="asd">        
                <option value="Watch">Watch</option>
                <option value="Delete">Delete</option>
                <option value="None">None</option>
                <option value="Other">Other</option>
        </select></td>
    </tr>
    <tr id="3">
      <td><input type="checkbox" /></td>
      <td id="filename">Mocking</td>
      <td>1280x720</td>
      <td> <select id="presetChoosen" value="asd">        
                <option value="Watch">Watch</option>
                <option value="Delete">Delete</option>
                <option value="None">None</option>
                <option value="Other">Other</option>
        </select></td>
    </tr>
  </tbody>
</table>
<button id="thechecked">Get Checked</button>