Javascript 将选中复选框的表行提取到对象数组中

我试图将特定对象保存在一个带有复选框“checked”的数组中。我想创建新的数组，以便只能使用后者

如何使用jquery实现这一点

'use strict';

class event {
  constructor(jQuery) {
    this.$ = jQuery;
  }

  getEvents(eventKey) {
    let aEvents = [{
        eventName: 'ABDCCC',
        // true = checked
        status: true
      },
      {
        eventName: 'ACC',
        status: true
      }
    ];
    return aEvents;

    /**
     * Update
     * @param {array} [aEvents]
     */
    setEvents = function(aEvents) {
      // Put them on a table
      var table = this.$('#eventsTable');
      table.find('tbody tr').remove();
      for (var i = 0; i < aEvents.length; i++) {
        let event = aEvents[i];
        table.find('tbody').append(`
        <tr>
          <td>
            ${event.eventName}
          </td>
          <td>
          <div id="check-list" class="custom-control custom-switch">
            <input type="checkbox" class="custom-control-input" ${event.status ? 'checked' : ''} id="customSwitch${i}"/>
            <label class="custom-control-label" for="customSwitch${i}"></label>
          </div>
          </td>
        </tr>
      `);
      }
    }
  }

“严格使用”；
班级活动{
构造函数（jQuery）{
这个.$=jQuery；
}
getEvents（eventKey）{
让aEvents=[{
eventName:'ABDCC'，
//真=已检查
状态：正确
},
{
eventName:'ACC'，
状态：正确
}
];
返回事件；
/**
*更新
*@param{array}[aEvents]
*/
setEvents=功能（AEEvents）{
//把它们放在桌子上
var table=this.$（“#eventsTable”）；
table.find（'tbody tr'）.remove（）；
对于（变量i=0；i

我想得到这个结果

• 你可以检查你喜欢的活动（完成）
• 单击按钮（“为ex保存此事件”）时，只有选中的事件将保存在新的对象数组上，与getEvents（）中的相同

---

通常，您需要在

HTML属性中传递一些锚定到所需的属性名称（例如，它将是

prop

attribute）。如果您不希望属性名称硬编码（这不是很灵活）

接下来，您只需选中

节点已选中（）复选框

这样，您就可以在选定的行上迭代，将包含目标数据的第一个（）

节点转换为对象属性：

$（'#savebtn'）。在（'click'，（）=>{
const selectedRows=[…$（'table tbody tr:has（“input:checked”））]
.map（tr=>
[…$（tr.find（'td:lt（2）'））
.reduce（（res，td）=>（res[$（td）.attr（'prop'）]=$（td.text（），res），{}））
console.log（selectedRows）
})

活动名称访客数量
圣诞夜派对500
第300天谢谢
独立日600
保存

这里有一个非常简单的方法来执行您想要的操作：

var arr=[]；
$（“#确定”）。单击（函数（）{
$（“#结果”）.html（“”）；
arr=[]；
$（'input.events[type=“checkbox”]”）。每个（函数（）{
如果（$（this）.is（“：checked”））{
var evName=$（this.attr（“id”）；
arr.push（$（'label[for=“”+evName+”）.text（）；
$（“#结果”）.append（“”++$”（“label[for=“+evName+”））.text（）+”
”；
} 
});
})；

表格{
宽度：100%；
}
表td{
显示：块；
}
#结果p{
显示：块；
}

事件一
事件二
事件三
事件四
事件五
好啊
选定事件：

这里有一个解决方案：

let checkedEvents = [];
$('#eventsTable').find('tbody tr').each(function(index) {
  if( $(this).find("input[type='checkbox'][id^=customSwitch]").prop('checked') ) {
    checkedEvents.push({
      eventName: $(this).find("td:first-child").text().trim(),
      status: $(this).find("input[type='checkbox'][id^=customSwitch]").prop('checked'),
    });
  }
});
// Do something with checkedEvents

---

如果要对一行中的更多标签/表格单元格执行此操作，则向它们添加id、类或其他属性可能有助于确定目标。如果这样做，甚至可以使用循环来设置对象的所有属性。

这应该是什么数组？jQuery对象、DOM节点、选定选项卡单元格中的某些值le rows…？对象数组，Sorry哪种类型的对象？是否将所需的输出附加到帖子中？@YevgenGorbunkov它们将具有与上面相同的属性，一个事件名和一个状态。我只希望用户可以选择他们喜欢的，并在另一个表中显示它们。您是否可以尝试添加格式化为and的代码添加一个更清晰的所需输出示例？最好在这里更好地理解您的逻辑和目标。

$（'eventsTable'）。find（'tbody tr'）

过多-它相当于

$（'eventsTable tbody tr'）

；循环所有行并检查每个步骤

prop（'checked'）

也太冗长-简单

：选中的

选择器以更简洁的方式进行操作；硬编码对象键名称将适用于其中两个，但对于更多的键可能会变得乏味-依赖某些属性更灵活；使用

[id^=customSwitch]

（借用自OP的代码）也没有多大意义-按类属性选择将是一个更好的选择。此外，执行

状态：$（this）.find（“输入[type='checkbox'][id^=customSwitch]”）。prop（'checked'）

没有意义，因为当

if（$（this）.find（“输入[type='checkbox'][id^=customSwitch]”）时，将达到该点。prop（'checked'））

条件已通过，因此简单的

状态：true

将更快地给出相同的结果（如果坚持硬编码您的对象方法）。对于灵活且可扩展的解决方案，您可能希望签出