在提交时从给定的复选框中至少设置一个复选框答案

【问题标题】：Making at least One Checkbox mandatory out of the given checkboxes on submit在提交时从给定的复选框中至少设置一个复选框
【发布时间】：2020-02-20 11:02:40
【问题描述】：

我在表单组中有几个复选框。我怎样才能使这个感兴趣的领域复选框在提交时成为必填项？至少用户在提交之前点击了一个复选框。我用过反应引导。

感谢任何帮助。

<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>

【问题讨论】：

在提交时，您可以检查 areaOfInterest 值是否为空白或其中包含某些值。
react bootstrap validations 这是为您提供表单验证的官方链接，您可以在 handleSubmit 函数中通过检查验证，当您在那里收到表单时，请检查它至少选中一个复选框。

标签： javascript reactjs react-bootstrap

【解决方案1】：

在表单提交你可以检查是否存在checked复选框，如果没有任何检查你可以return 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>

【讨论】：

【解决方案2】：

您可以在提交表单之前简单地检查areaOfInterest 是否有任何价值。如果没有，向用户显示一个错误，告诉他们这是强制性的。如果areaOfInterest 甚至有一个响应，让表单提交。

【讨论】：

【解决方案3】：

取决于你如何处理状态。我假设您正在以某种方式保存复选框的状态，例如数组或对象。一种方法是创建一个函数来检查复选框的状态。如果它为空，您可以禁用保存或发送错误消息。

【讨论】：