Bootstrap snippet: list check box

designed to help people of all skill levels - designer or developer, huge nerd or early beginner.
copy and paste the code. Use it as a complete kit or use it to start something more complex.



<div class="btn-group" data-toggle="buttons"> <label class="btn btn-success active"> <input type="checkbox" autocomplete="off" checked> <span class="glyphicon glyphicon-ok"></span> 周國回 <span class='badge'>12</span> </label> </div > <div class="well" style="max-height: 300px;overflow: auto;"> <ul class="list-group checked-list-box"> <li class="list-group-item"><input type="checkbox" class="hidden" /><span class="glyphicon glyphicon-unchecked"></span>周國回<span class='badge'>12</span></li> <li class="list-group-item" data-checked="true"><input type="checkbox" class="hidden" /><span class="glyphicon glyphicon-check"></span>周國回<span class='badge'>12</span></li> <li class="list-group-item">Morbi leo risus</li> <li class="list-group-item">Porta ac consectetur ac</li> <li class="list-group-item">Vestibulum at eros</li> <li class="list-group-item">Cras justo odio</li> <li class="list-group-item">Dapibus ac facilisis in</li> <li class="list-group-item">Morbi leo risus</li> <li class="list-group-item">Porta ac consectetur ac</li> <li class="list-group-item">Vestibulum at eros</li> </ul> </div>
.btn span.glyphicon { opacity: 0; } .btn.active span.glyphicon { opacity: 1; } /* CSS REQUIRED */ .state-icon { left: -5px; } .list-group-item-primary { color: rgb(255, 255, 255); background-color: rgb(66, 139, 202); } /* DEMO ONLY - REMOVES UNWANTED MARGIN */ .well .list-group { margin-bottom: 0px; }
$(function () { $('.list-group.checked-list-box .list-group-item').click(function () { $(this).attr("class", "list-group-item list-group-item-primary"); var item1 = $( "span" )[0]; $(this).find("span").first().attr("class", "glyphicon glyphicon-check"); }); });
sonne

list check box

sonne
  Apr 25th, 04:57
133 Views