Home > Article > Web Front-end > How to use checkboxes in select options using JavaScript?

How to use checkboxes in select options using JavaScript?

PHPzforward: 2023-08-29 22:41:091264browse

如何使用 JavaScript 在选择选项中使用复选框？

Sometimes, we need to use checkboxes in select options. We can allow users to select multiple options by introducing checkboxes with select options. However, if we use multiple properties of the menu to improve user experience.

Here we will use JQuery and JavaScript to manage the value of the selected checkbox in the

Create a custom selection menu

The

element of

grammar

Users can use JavaScript to manage the checkboxes of custom drop-down menus according to the following syntax.

function showOptions() {
   if (showCheckBoxes) {
      // show options div
      showCheckBoxes = false;
   } else {
      // hide options div
      showCheckBoxes = true;
   }
}

function getOptions() {
   // selectedOptions is an array containing all checked checkboxes      
   var selectedOptions = document.querySelectorAll('input[type=checkbox]:checked')
}

In the above syntax, we display the options of the custom drop-down list based on the value of the showCheckBoxes variable. Additionally, we can iterate through the selectedOptions array to get all selected checkboxes one by one.

step

Step 1 - Create a div that contains the menu text.
Step 2 - Now, use custom HTML and use checkbox input type for options.
Step 3 - Add onClick event on the div element. When the user clicks on the div it should call the showOptions() menu.
Step 4 - In JavaScript, declare the showCheckBoxes variable and initialize it with a true boolean value. We will display the options of the custom dropdown based on the showCheckBoxes variable.
Step 5 - Whenever the user clicks on the dropdown div element, change the display of the options div based on the value of the showCheckBoxes variable.
Step 6 - Now, define a getOptions() function. In the getOptions() function, access all selected checkboxes and print the values of all selected checkboxes by iterating over the selectedOptions array using a for loop.

Example 1

In the example below, we have created a custom selection menu as described in the algorithm above. Users can select multiple options by checking multiple checkboxes.

Additionally, when the user clicks the "Get Selected Checkboxes" button, it calls the getOptions() function and prints the values of all selected checkboxes, so that we can get all the selections of the selection menu options.

<html>
<head>
   <style>
      .dropdown {
         width: 12rem;
         height: 1.5rem;
         font-size: 1.3rem;
         padding: 0.6 0.5rem;
         background-color: aqua;
         cursor: pointer;
         border-radius: 10px;
         border: 2px solid yellow;
      }
      #options {
         margin: 0.5rem 0;
         width: 12rem;
         background-color: lightgrey;
         display: none;
         flex-direction: column;
         border-radius: 12px;
      }
      label {
         padding: 0.2rem;
      }
      label:hover {
         background-color: aqua;
      }
      button {
         font-size: 1rem;
         border-radius: 10px;
         padding: 0.5rem;
         background-color: yellow;
         border: 2px solid green;
         margin: 1rem 0;
      }
   </style>
</head>
<body>
   <h2>Creating the custom dropdown menu to use <i>Checkboxes</i> as an option.
   </h2>
   <div class = "dropdown" onclick = "showOptions()">
      show all options
   </div>
   <div id = "options">
      <label for = "one">
         <input type = "checkbox" id = "one" value = "First Option" />
            First Option
      </label>
      <label for = "two">
         <input type = "checkbox" id = "two" value = "Second Option" />
            Second Option
      </label>
      <label for = "three">
         <input type = "checkbox" id = "three" value = "Third Option" />
            Third Option
      </label>
      <label for = "four">
         <input type = "checkbox" id = "four" value = "Fourth Option" />
            Fourth Option
      </label>
      <label for = "five">
         <input type = "checkbox" id = "five" value = "Fifth Option" />
            Fifth Option
      </label>
   </div>
   <div id = "output"> </div>
   <button onclick = "getOptions()"> Get all Selected Checkboxes </button>
   <script>
      let output = document.getElementById('output');
      var showCheckBoxes = true;

      function showOptions() {
         var options =
            document.getElementById("options");

         if (showCheckBoxes) {
            options.style.display = "flex";
            showCheckBoxes = !showCheckBoxes;
         } else {
            options.style.display = "none";
            showCheckBoxes = !showCheckBoxes;
         }
      }
      function getOptions() {
         var selectedOptions = document.querySelectorAll('input[type=checkbox]:checked')
         output.innerHTML = "The selected options are given below. <br/>";
         for (var i = 0; i < selectedOptions.length; i++) {
            output.innerHTML += selectedOptions[i].value + " , ";
            console.log(selectedOptions[i])
         }
      }
   </script>
</body>
</html>

In this tutorial, users learned how to create a custom selection menu using html, CSS, and JavaScript. Additionally, users can create selection menus with checkboxes using some CSS libraries like Bootstrap.

The above is the detailed content of How to use checkboxes in select options using JavaScript?. For more information, please follow other related articles on the PHP Chinese website!

JavaScript jquery css bootstrap html for 循环事件算法

Statement：

This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete

Previous article：How is the Promise.any() method different from the Promise.race() method in JavaScript?Next article：How is the Promise.any() method different from the Promise.race() method in JavaScript?

See more

How to use checkboxes in select options using JavaScript?

Create a custom selection menu

grammar

step

Example 1

Related articles