在选中多个复选框时，使用ReactJs和BootstrapUI获取所有值

import React, { useState } from 'react';

function CheckboxComponent() {
  const [selectedValues, setSelectedValues] = useState([]);

  const handleCheckboxChange = (event) => {
    const { value, checked } = event.target;
    if (checked) {
      setSelectedValues([...selectedValues, value]);
    } else {
      setSelectedValues(selectedValues.filter((val) => val !== value));
    }
  };

  return (
    <div>
      <label>
        <input type="checkbox" value="Option 1" onChange={handleCheckboxChange} />
        Option 1
      </label>
      <label>
        <input type="checkbox" value="Option 2" onChange={handleCheckboxChange} />
        Option 2
      </label>
      <label>
        <input type="checkbox" value="Option 3" onChange={handleCheckboxChange} />
        Option 3
      </label>
      {/* Add more checkboxes as needed */}
      <button onClick={() => console.log(selectedValues)}>Get Selected Values</button>
    </div>
  );
}

export default CheckboxComponent;