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

Question

I'm trying to save the specific objects in an array that has the checkbox 'checked'. I want to create the new array so I can use only those latter.

How can I do that using 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>
      `);
      }
    }
  }

I want to get this result

• You can check the Events you like (done)
• When click on a button ('save this events' for ex) only the checked events will be saved on a new array of objects, the same ones in getEvents()

Answer 1

Conventionally, you would need to pass some anchor to your desired property name within <td> HTML-attributes (say, it would be prop attribute). If you don't want property names to be hardcoded (which is not so flexible).

Next, you simply need to select <tr> nodes having ( .has("input:checked") ) checked checkbox.

With that you iterate over selected rows, turning first ( :lt() ) <td> nodes, containing your target data into object properties:

 $('#savebtn').on('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) })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <thead> <tr> <th>Event name</th><th>Visitors qty</th><th>visited</th> </tr> </thead> <tbody> <tr> <td prop="eventname">Christmass Eve Party</td><td prop="qty">500</td><td><input type="checkbox"></input> </tr> <tr> <td prop="eventname">Thanksgivin Day</td><td prop="qty">300</td><td><input type="checkbox"></input> </tr> <tr> <td prop="eventname">Independence Day</td><td prop="qty">600</td><td><input type="checkbox"></input> </tr> </tbody> </table> <button id="savebtn">Save</button>

Answer 2

Here is a very simple way to perform what you want:

 var arr = []; $("#ok").click(function(){ $("#results").html(""); arr = []; $('input.events[type="checkbox"]').each(function(){ if($(this).is(":checked")){ var evName = $(this).attr("id"); arr.push($('label[for="'+evName+'"]').text()); $("#results").append("<p>"+$('label[for="'+evName+'"]').text()+"</p>"); } }); });

 table{ width:100%; } table td{ display:block; } #results p{ display:block; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tbody> <tr> <td><input type="checkbox" class="events" id="ev1" /> <label for="ev1">Event One</label> </td> <td><input type="checkbox" class="events" id="ev2" /> <label for="ev2">Event Two</label> </td> <td><input type="checkbox" class="events" id="ev3" /> <label for="ev3">Event Three</label> </td> <td><input type="checkbox" class="events" id="ev4" /> <label for="ev4">Event Four</label> </td> <td><input type="checkbox" class="events" id="ev5" /> <label for="ev5">Event Five</label> </td> <td> <button id="ok">OK</button> </td> </tr> </tbody> </table> <h5>Selected events :</h5> <div id="results"></div>

Answer 3

Here's a solution:

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

If you are going to do this with more labels/table cells in a row, adding an id, class or other property to them might be helpful for targetting. If you do this consequently, you could even use a loop to set all attributes of the object.