Dropdown-Menü aus Gmail auswählen

Question

Ich versuche, das Dropdown-Menü von Gmail mit Bootstrap zu tun.

aber ich habe 2 Probleme:

1- Ich kann nicht in dem Eingabekontrollkästchen klicken, um alle auswählen

2 - ich möchten, wenn ein Auswahl aller Eingaben ausgewählt bekommen und wenn ich keine auswähle, entferne die Auswahl von der Eingabe

so: wenn ich (alle) wähle die Eingabe, wenn ich klicke (keine) entfernen Sie die Auswahl aus der Eingabe und wenn ich in das (Eingabefeld) neben klicken der Pfeil nach unten wählt alles aus, verstanden?

Entschuldigung dafür könnte falsch sein, ich versuche nur, diese google gmail Button Probe zu machen, ist eine andere Möglichkeit, dies zu tun? danke

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/

Answer 1

Ok, ich den Knopf in ein div umgewandelt, jedoch hielt ich die Klassen als "BTN BTN-default ...". So konnte ich mit .mouseenter und .mouseout auf der CHECKBOX spielen. Schau dir die forked jsfiddle an. Scheint zu tun, was du brauchst.

$('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 me out 
 
    <input type="checkbox" class="check"> Check me out 
 
    <input type="checkbox" class="check"> Check me out 
 
    <input type="checkbox" class="check"> Check me out 
 
    <input type="checkbox" class="check"> Check me out