выпадающее меню выбора из gmail

Question

Я пытаюсь сделать выпадающее меню из gmail, используя bootstrap.

, но у меня есть 2 проблемы:

1- я не могу нажать на входной флажок, чтобы выбрать все

2 - я хотел бы, если выбрать все входные получить выбранные и если я не выбрал ни один из них, удалите выбранный из ввода

так: если я нажму (все), выберите вход, если я нажму (нет), удалите выбранный из ввода и, если я нажму в (поле ввода) рядом стрелка вниз выбрать все, понять?

Извините, что это может быть неправильно, я просто пытаюсь сделать этот образец кнопки Google Gmail, это другой способ сделать это? спасибо

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

Хорошо, я преобразовал КНОПКА в DIV, но я все классы, как "БТН БТН-умолчанию ...". Это позволило мне играть с .mouseenter и .mouseout в CHECKBOX. Посмотрите на forked jsfiddle. Кажется, нужно делать то, что вам нужно.

$('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