Multi-select dropdown list with checkbox

on

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://unpkg.com/bootstrap@3.3.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />

    <link
      href="https://unpkg.com/bootstrap-multiselect@0.9.13/dist/css/bootstrap-multiselect.css"
      rel="stylesheet"
    />
    <title>Document</title>
  </head>
  <body>
    <form id="form1">
      <div style="padding: 20px">
        <select id="chkveg" multiple="multiple">
          <option value="cheese">Cheese</option>
          <option value="tomatoes">Tomatoes</option>
          <option value="mozarella">Mozzarella</option>
          <option value="mushrooms">Mushrooms</option>
          <option value="pepperoni">Pepperoni</option>
          <option value="onions">Onions</option>
        </select>

        <br /><br />

        <input type="button" id="btnget" value="Get Selected Values" />
      </div>
    </form>
  </body>
  <script src="https://unpkg.com/jquery@3.3.1/dist/jquery.min.js"></script>
  <script src="https://unpkg.com/bootstrap@3.3.2/dist/js/bootstrap.min.js"></script>
  <script src="https://unpkg.com/bootstrap-multiselect@0.9.13/dist/js/bootstrap-multiselect.js"></script>
  <script>
    $(function () {
      $("#chkveg").multiselect({
        includeSelectAllOption: true,
      });

      $("#btnget").click(function () {
        alert($("#chkveg").val());
      });
    });
  </script>
</html>




Run This Code    

Comments

Post a Comment