Checked boxes report exemple

by Alison Moura

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
      function report() {
        let checkeds = document.querySelectorAll("input[type=checkbox]:checked")
        let stringValues = Array.from(checkeds).map((item) => {
          return item.value
        }).toString()

        document.getElementById('report').innerHTML = `"I really like to eat [ ${stringValues} ], and fruits are the best thing ever."`

      }

    </script>
  </head>

  <body>
    Select your favorites:
    <section>
      <input type="checkbox" value="Apple"> Apple <br>
      <input type="checkbox" value="Banana"> Banana <br>
      <input type="checkbox" value="Pears"> Pears <br>
      <input type="checkbox" value="Melon"> Melon <br>
      <input type="checkbox" value="Orange"> Orange <br>
    </section>

    <button onclick="report()">Do Report</button>

    <div id="report"></div>
  </body>

</html>