How to get multiple checkbox values in reactjs using antd checkbox?

Question

I am getting the checkboxes based on table columns. If I select check box I am getting only one checked value. I want to get multiple checked values.

How do I achieve that?

class StudentTable extends React.Component {
  state = {
    columns: [
      {
        title: "StudentID",
        dataIndex: "studentid",
        key: "studentid"
      },
      {
        title: "Name",
        dataIndex: "name",
        key: "name"
      }
    ]
  };

  onChange = e => {
    alert(JSON.stringify(e));
    console.log(`checked = ${e.target.checked}`);
    console.log(`checked = ${e.target.name}`);

    this.setState({
      [e.target.name]: e.target.value
    });

    if (e.target.checked === true) {
      let filterData = this.state.columns.filter(columnData => {
        return e.target.name === columnData.dataIndex;
      });
      CsvData.push(filterData[0].dataIndex);

      console.log("After Filter", filterData[0].dataIndex);
    }
  };

  render() {
    return (
      <div>
        {this.state.columns.map(columData => {
          return (
            <div key={columData.key}>
              <Checkbox name={columData.dataIndex} onChange={this.onChange}>
                {columData.dataIndex}
              </Checkbox>
            </div>
          );
        })}
        <CSVLink data={CsvData}>Download me</CSVLink>;<h2>Student Data</h2>
        <Table
          dataSource={data}
          columns={this.state.columns}
          pagination={{ pageSize: 5 }}
          rowKey={record => record.id}
          onChange={this.handleChange}
        />
      </div>
    );
  }
}

could you format the code blocks correctly please? Thanks!

Marc Carné Bori
– Marc Carné Bori

2019-03-26 12:31:57 +00:00
Commented Mar 26, 2019 at 12:31 — Marc Carné Bori
– Marc Carné Bori, Commented Mar 26, 2019 at 12:31

Shreyans Shrivastav · Accepted Answer · 2019-03-29 09:42:23Z

3

Use checkbox group instead of checkbox

<Checkbox.Group 
     options={this.state.columns.map(column => ({label:column.dataIndex, value: column.dataIndex}))} 
     onChange={this.onChange} 
/>

I hope this would help

Antd's Checkbox Group https://ant.design/components/checkbox/#components-checkbox-demo-group

answered Mar 29, 2019 at 9:42

Shreyans Shrivastav

5372 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Nagamani Siripalli Over a year ago

thank you for given reply.How to get table data based on check box selected

Shreyans Shrivastav Over a year ago

do a filter on your data with selected columns,something like this : datas.map(data => {let newData = {}; ["column1","column1"].forEach(key=> newData[key] = data[key]); return newData}

Nagamani Siripalli Over a year ago

i have trying to this way but i get undefined columns

sujon Over a year ago

can you look this ? stackoverflow.com/questions/61089573/…

Collectives™ on Stack Overflow

How to get multiple checkbox values in reactjs using antd checkbox?

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related