Selecting options from the Gmail dropdown menu

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

https://i.sstatic.net/K1NCg.png

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

Is the issue of Padding Overlap with Sidebar Item List getting in the way?

I am currently new to coding in HTML and CSS, so please bear with me if my code seems outdated or unconventional. I am working on creating a basic test website with a sidebar, but I'm encountering an issue where the items in my list are overlapping du ...

htmlcss

I find the SetInterval loop to be quite perplexing

HTML <div id="backspace" ng-click="deleteString(''); decrementCursor();"> JS <script> $scope.deleteString = function() { if($scope.cursorPosVal > 0){ //$scope.name = $scope.name - letter; ...

javascripthtmlcssangularjs

The function was expecting an array for ordering, but instead received an object

I need help filtering my results based on their position. Whenever I try to use the orderBy function, it breaks the page because the result is not an array. How can I fix this issue? I'm currently stuck at this point. This is how I attempt to filter ...

htmlangularjsfirebasefirebase-realtime-database

Fade out a component in Material UI/React by setting a timeout in the parent's useEffect hook for when it unmounts

Incorporating a fade out transition into my child component, <Welcome />, using Material UI's Fade component is my current goal. This transition should be triggered by two specific conditions: The timeout set in the useEffect function expires. ...

javascriptcssreactjsmaterial-ui

Most effective method for designing a reusable <table> appearance

For my project, I need to create multiple tables using data from a database on different pages. I want to maintain a consistent styling throughout these tables: The first and last rows should have a bold font with reversed foreground/background colors. Th ...

jquerycss

The inner div overflowing at 100% dimensions

I'm working with an outer DIV that has a CSS property of position: fixed to serve as an overlay. Inside this, I have another div set to 100% width with a margin of 30px to create the appearance of an inner border frame. Unfortunately, the right and bo ...

csshtml

Motion of the atoms

I recently came across an interesting effect on the IconArchive website, but I am unsure how to implement it. If anyone could help me understand the concept with a small example, that would be greatly appreciated. You can see the effect in action by visi ...

javascriptjqueryhtmlcss

Is there a simple method in JavaScript to combine, structure, and join numerous multi-dimensional arrays in a specific manner (from right to left)?

Looking for a simple solution to merge, flatten, and concatenate multiple multi-dimensional arrays in JavaScript in a specific manner (from right to left) # Example [['.class1', '.class2'], ['.class3', ['.class4', & ...

javascriptjqueryarraysmultidimensional-arrayunderscore.js

What is the best way to retrieve orders that fulfill all the specified criteria across all batches?

In my mssql database, there are two tables: orders and batches. An order can contain multiple lots, each with its cost recorded. I am interested in retrieving all orders where the cost of EVERY lot is over 100 units. If any part of an order has a lot cos ...

jquerysqlsql-serverjoin

How to turn off automatic password suggestions in Chrome and Firefox

Currently, I have integrated a 'change password' feature which includes fields for 'old password', 'new password', and 'retype password'. However, the autocomplete feature is suggesting passwords from other user acco ...

htmlangulartypescriptautocomplete

What steps can be taken to restrict a user's access to the main page unless they are logged in?

I have created sign up and login pages using JavaScript, HTML, and PHP with a database. After a user successfully logs in on the login page, the following code is executed: sessionStorage.setItem('logged','loggedIn'); The user is then ...

javascriptphphtml

Achieving bottom alignment for an element within a flex item: steps for success

I am dealing with a flex container that contains three flex items, each of which has a link that needs to be aligned at the bottom (all links should be bottom middle-aligned). The flex-items are stretched and do not have a fixed height, similar to the fle ...

htmlcssflexbox

Creating the x and y coordinates for drawImage in HTML5

Understanding the x and y axis has posed a challenge for me: //retrieve last known x and y coordinates ...code var p = $("#draggable"); var offset = p.offset(); var x = offset.left; var y = offset.top; //establish new font siz ...

javascriptjqueryhtmlhtml5-canvas

"Enhanced Web Interactions with JavaScript Animations

I've been diving into my JavaScript project lately. I'm currently focusing on creating some cool animations, particularly one that involves making a ball bounce up and down. My code seems to work flawlessly for the downward bounce, but I'm f ...

javascripthtmlcss

Appending a row to a table will not trigger events in Select2

Despite several attempts, I can't seem to get the select2:select event working on dynamically added rows in a table using select2. The event only works on the original row. Unfortunately, I don't have any additional details about this issue. COD ...

javascriptjqueryhtmllaraveljquery-select2

Is it possible to improve the cleanliness of my code with jQuery chaining?

As I continue to delve into jQuery and expand my knowledge each day, I find myself wondering about ways to write cleaner code. One concept that intrigues me is 'chaining', but I am unsure of how to implement it. Here is a snippet of functional j ...

jquery

The responsiveness of Slick Slider's breakpoints is malfunctioning

After implementing a slider using slick slider, I encountered an issue with the width when testing it online and in a normal HTML file. If anyone could assist me in resolving this issue, I would greatly appreciate it. Please inspect the code for both scen ...

javascriptjqueryhtmlcssslick.js

altering the dynamics of jQuery easing

What happens when you apply an Easing to an animation? The animation will adhere to the equation of that easing. You can find a great explanation on this link. For example, if I choose an Easing and set the animation time to 1000 ms, the animation will fo ...

jqueryeasingeasing-functions

Choose a portion of the content within a div element

In my SVG element, I have created a foreignObject with a textarea and a div inside. The textarea is transparent and lies on top of the div. As users type in the textarea, the text gets copied to the div creating a WYSIWYG editor. Everything functions corre ...

javascriptjquerysvg

Using canvas transformation changes the way drawImage is applied

I have been working on a game as a hobby and you can find it at . I have managed to get most aspects of the game working well, such as transformation, selection, movement, and objects. However, there is one particular challenge that I am struggling with. ...

javascripthtmlcanvas