Selecting options from the Gmail dropdown menu

I'm attempting to create a dropdown menu similar to the one in Gmail using Bootstrap.

However, I have encountered 2 issues:

1- I am unable to click on the input checkbox to select all

2 - I would like it so that if I select all, the input gets selected, and if I choose none, the selection is removed from the input

So, if I click on "All", the input should be selected. If I click on "None," the selection should be removed from the input. And if I click on the input box beside the down arrow, all options should be selected. Do you understand?

Apologies if this is confusing, I am simply trying to replicate the Google Gmail button appearance. Is there another way to achieve this? Thank you.

HTML:

<div class="row">
    <div class="col-sm-3">
      <div class="panel-body">
        <div class="btn-group">
          <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
            <input type="checkbox" name="vehicle1" value="Bike">
            <i class="fa fa-caret-down" aria-hidden="true"></i>
          </button>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">All</a></li>
            <li><a href="#">None</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>

JSFiddle: http://jsfiddle.net/dJDHd/2157/

jqueryhtmlcsstwitter-bootstrap

Answer №1

Sure thing! I decided to change the BUTTON element into a div, but I kept the classes as "btn btn-default...". This way, I could experiment with .mouseenter and .mouseout on the CHECKBOX. Check out the modified jsfiddle to see if it meets your requirements.

$('body').on('mouseenter','input',function() {
    $('.btn').prop('disabled', true);
});
$('body').on('mouseout','input',function() {
    $('.btn').prop('disabled', false);
});

Answer №2

$("#checkAll").click(function () {
    $(".check").prop('checked', $(this).prop('checked'));
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
    <div class="col-sm-3">
      <div class="panel-body">
        <div class="btn-group">
          <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
            <input type="checkbox" id="checkAll" name="vehicle1" value="Bike">
            <i class="fa fa-caret-down" aria-hidden="true"></i>
          </button>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">All</a></li>
            <li><a href="#">None</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  
   <input type="checkbox" class="check"> Check this box
   <input type="checkbox" class="check"> Confirm selection
   <input type="checkbox" class="check"> Verify choice
   <input type="checkbox" class="check"> Mark as done
   <input type="checkbox" class="check"> Approve the action

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Why won't XML load with jquery GET, but does load with a direct link and PHP?

When it comes to pulling in an xml feed, I've been experimenting with using php and simpleXML to load it. Interestingly, I can access the direct link without any issues. However, when attempting to utilize jquery and GET method, the request times out ...

jqueryxmlajax

Easily upload a file by simply selecting it, no need to fill out a form or submit anything

I am working on adding a mail feature to a WordPress admin plugin. My goal is to allow users to attach a file dynamically and send it through email as an attachment. I have implemented an AJAX method for choosing the file upload, but I seem to be stuck. Ca ...

jqueryajaxfile-upload

What is the best way to perform an AJAX request in Typescript with JSON data?

Currently, I am delving into the realm of AJAX and encountering some hurdles when attempting to execute an AJAX request with parameters. Specifically, I am facing difficulties in sending JSON data: My approach involves utilizing Typescript in tandem with ...

phpjqueryjsonajaxtypescript

Unusual problem encountered with Chart.js bar chart, image dispersion

On my HTML page, I have integrated a stacked bar chart using the Chart.js library to visually represent data for users. The data changes based on user selection, and the JavaScript function that enables this onclick feature is: function aggLav(){ [... ...

javascripthtmljsongraphicschart.js

Present the received JSON objects in a visually pleasing manner

Is there a way to present JSON objects retrieved from my server more visually on my webpage rather than just using an alert? success: function (data, textStatus, jqXHR) { alert(data.details + '\nHello ' + data.client ...

jqueryjson

Ways to adjust the size or customize the appearance of a particular text in an option

I needed to adjust the font size of specific text within an option tag in my code snippet below. <select> <?php foreach($dataholder as $key=>$value): ?> <option value='<?php echo $value; ?>' ><?php echo ...

javascriptphpcsshtml

What is the best way to display a bitmap image in a Div, Span, Label, etc. on an Asp.Net page without using a Handler?

I am looking to display a bitmap image within a Div element using code behind. I prefer not to use a handler for this task. Here is an example of what I would like to achieve: div.InnerHtml = BitmapImage; ...

c#asp.nethtmlbitmap

Attempting to embed an image within the datepicker input

After successfully implementing the datepicker to select a date, I decided to add a buttonImage option for opening the datepicker on image click. However, I encountered an issue when trying to place my calendar image inside my input element, floated to th ...

jquerycssdatepicker

The CSS property 'background' does not seem to be functioning properly within an 'if... else' statement

I've been struggling to get the CSS property 'background' working when using it within an 'if.. else' statement. I have tried various combinations of 'background-color' and 'backgroundColor' in both CSS and JQue ...

jquery

What is the best way to incorporate a smooth transition for an object as it appears on the screen in React?

After configuring my code to display a component in the HTML only if a specific hook is set to true, I encountered an issue with a CSS transition. The problem arises because the 'open' class is triggered at the same time the element becomes true, ...

javascripthtmlcssreactjs

Ways to apply a border-bottom to tr elements without affecting td elements

Is there a way to add a bottom border to <tr> elements without affecting <td> cells that have no border? I attempted the following approach, but setting border: 0 for <td> overrides the border for all <tr> elements as well, leaving ...

css

Ensuring a full height div using CSS

I have encountered an issue and created a fiddle to help illustrate it: http://jsfiddle.net/XJpGT/ The challenge I am facing is ensuring that the height of the green box always remains at 100%, while also making sure that the green and orange boxes do not ...

csshtml

Transmitting HTML and CSS code to the server for seamless conversion into a PDF file

I recently started using a tool called GemBoxDocument that allows me to convert HTML files into PDFs. Their website provides sample code demonstrating how to convert an existing file on a server (source): using System; using System.Linq; using System.Tex ...

c#htmlajax

Issues with alignment within Bootstrap grid system

I have three unique "cards" that I want to display horizontally and center on the page without using the bootstrap card class. Currently, I am attempting to assign each of them a width of .col-lg-4 within an outer div set to full width. However, they are s ...

csstwitter-bootstrap

Uploading multiple files with unique IDs into a table

Currently, I am attempting to modify the code found at: This code functions perfectly with a single file input (and has been utilized in various projects without any issues). My specific requirement is to generate a table with a file input within each ro ...

javajqueryhtmlspringthymeleaf

How do I use CSS to organize data by row and column within a table?

I'm looking to format the table data in a column-row layout for mobile devices. Can anyone provide an example or guidance on how to achieve this? I've browsed through some discussions but haven't found a solution that works with tables. The ...

htmlcss

Adjust the width dynamically according to the size of the parent container

My goal is to extract the width of a specific div, for instance: .ow_newsfeed_left (which has varying widths), and then apply that width to a child div. I've attempted using each, but it only assigns the first value. Here is the code I have come up ...

jquerywidthparenteach

Avoiding memory leaks and performance hiccups in canvas applications

Currently, I am utilizing a canvas to present a grid made up of interconnected dots (a common feature in many codepens and experiments), and everything functions smoothly. In order to make the canvas responsive, I encapsulated all my code generation within ...

jqueryhtmlcanvasmemory-leaks

The separator falls short of spanning the entire width of the page

For some reason, I can't seem to make the divider extend to the full length of the page. <TableRow> <TableCell className={classes.tableCell} colSpan={6}> <Box display="grid" gridTemplateColumn ...

csstypescriptmaterial-uistylesdivider

Linked Dropdownlists Connected to a Single Dropdownlist

I am struggling to find the best way to phrase my question, but I need some help. I want to connect three dropdown lists together in a specific way. Dropdown list 2 and 3 should be disabled so the user cannot interact with them, while dropdown list 1 remai ...

htmlasp.netwebformssqldatasource