<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <ul class="list-unstyled"> <li><label><input type="checkbox" class="all"> All</label></li> <li><hr></li> <li><label><input type="checkbox" name="casual_dating"> Casual Dating</label></li> <li><label><input type="checkbox" name="serious_commitment"> Serious Commitment</label></li> <li><label><input type="checkbox" name="companionship"> Companionship</label></li> <li><label><input type="checkbox" name="hookups"> Hookups</label></li> <li><label><input type="checkbox" name="marriage"> Marriage</label></li> <li><label><input type="checkbox" name="local_connections"> Local Connections</label></li> <li><label><input type="checkbox" name="more_dates"> More Dates</label></li> <li><label><input type="checkbox" name="fast_matches"> Fast Matches</label></li> <li><label><input type="checkbox" name="online_interaction"> Online Interaction</label></li> <li><label><input type="checkbox" name="high_compatiblity"> High Compatiblity</label></li> </ul> </div> </div>

$('.all').on('click', function(e){ $this = this; $.each($(this).parents('ul').find('input'), function(i, item){ $(item).prop('checked', $this.checked); }); });