Создание флажков с множественным выбором в HTML

Чтобы создать флажки с множественным выбором в HTML, вы можете использовать различные методы. Вот несколько вариантов:

Метод 1: использование HTML и JavaScript

<!DOCTYPE html>
<html>
<head>
  <title>Multiple Choice Checkboxes</title>
  <script>
    function displaySelected() {
      var checkboxes = document.getElementsByName('option');
      var selectedOptions = [];

      for (var i = 0; i < checkboxes.length; i++) {
        if (checkboxes[i].checked) {
          selectedOptions.push(checkboxes[i].value);
        }
      }

      var result = "Selected Options: " + selectedOptions.join(", ");
      document.getElementById('result').innerHTML = result;
    }
  </script>
</head>
<body>
  <h1>Multiple Choice Checkboxes</h1>

  <form>
    <input type="checkbox" name="option" value="Option 1"> Option 1<br>
    <input type="checkbox" name="option" value="Option 2"> Option 2<br>
    <input type="checkbox" name="option" value="Option 3"> Option 3<br>
    <input type="checkbox" name="option" value="Option 4"> Option 4<br>
    <br>
    <button type="button" onclick="displaySelected()">Submit</button>
  </form>

  <p id="result"></p>
</body>
</html>

Метод 2. Использование HTML и CSS

<!DOCTYPE html>
<html>
<head>
  <title>Multiple Choice Checkboxes</title>
  <style>
    input[type="checkbox"] {
      display: none;
    }

    input[type="checkbox"] + label {
      cursor: pointer;
      padding: 5px;
      border: 1px solid #ccc;
    }

    input[type="checkbox"]:checked + label {
      background-color: lightblue;
    }
  </style>
</head>
<body>
  <h1>Multiple Choice Checkboxes</h1>

  <form>
    <input type="checkbox" id="option1" name="option1">
    <label for="option1">Option 1</label><br>

    <input type="checkbox" id="option2" name="option2">
    <label for="option2">Option 2</label><br>

    <input type="checkbox" id="option3" name="option3">
    <label for="option3">Option 3</label><br>

    <input type="checkbox" id="option4" name="option4">
    <label for="option4">Option 4</label><br>
  </form>
</body>
</html>

Метод 3. Использование библиотеки пользовательского интерфейса, например Bootstrap

<!DOCTYPE html>
<html>
<head>
  <title>Multiple Choice Checkboxes</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<body>
  <h1>Multiple Choice Checkboxes</h1>

  <form>
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="option1">
      <label class="form-check-label" for="option1">
        Option 1
      </label>
    </div>

    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="option2">
      <label class="form-check-label" for="option2">
        Option 2
      </label>
    </div>

    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="option3">
      <label class="form-check-label" for="option3">
        Option 3
      </label>
    </div>

    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="option4">
      <label class="form-check-label" for="option4">
        Option 4
      </label>
    </div>
  </form>

  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html>