javascript - 提交时从给定的复选框中至少强制选择一个复选框

Question

我在表单组中有几个复选框。如何在提交时强制选择此感兴趣区域复选框？用户在提交之前至少单击一个复选框。我使用过react-bootstrap。

感谢任何帮助。

<Form.Group>
    <Form.Label>Area of Interest</Form.Label>
    <Form.Check
        name="areaOfInterest"
        label="Dedicated Teams"
        id="dt"
        value={"Dedicated Teams" || formInput.areaOfInterest}
        onChange={handleCheck}
    />
    <Form.Check
        name="areaOfInterest"
        label="Cloud Expert Advice &amp; Support"
        id="ceas"
        value="Cloud Expert Advice &amp; Support"
        onChange={handleCheck}
    />
    <Form.Check
        name="areaOfInterest"
        label="Software Development"
        id="sd"
        value="Software Development"
        onChange={handleCheck}
    />
    <Form.Check
        name="areaOfInterest"
        label="Digital Transformation"
        id="dit"
        value="Digital Transformation"
        onChange={handleCheck}
    />
</Form.Group>

Answer 1

在表单提交上，您可以检查是否存在选中复选框，如果没有选中，您可以返回 false。

演示:

function submitForm(){
  if(!document.querySelector(':checked'))
    return false;
};

<form onsubmit="return submitForm()">
  <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
  <label for="vehicle1"> I have a bike</label><br>
  <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
  <label for="vehicle2"> I have a car</label><br>
  <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
  <label for="vehicle3"> I have a boat</label><br>
  
  <button>Submit</button>
</form>