Skip to content

Instantly share code, notes, and snippets.

@haijima

haijima/sample.html

Last active March 28, 2019 22:41
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save haijima/75d2c9b27ab34076a74c to your computer and use it in GitHub Desktop.
Save haijima/75d2c9b27ab34076a74c to your computer and use it in GitHub Desktop.
Download ZIP
dropdown checkbox list with bootstrap
Raw
sample.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>checklist sample</title>
<!-- style -->
<style>
.dropdown-menu > li.checkbox{
padding: 3px 20px;
}
</style>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
target
<span class="dropdown">
<span class="glyphicon glyphicon-filter dropdown-toggle" data-toggle="dropdown" aria-expanded="true"></span>
<!-- modal -->
<ul class="dropdown-menu" role="menu">
<li class="checkbox keep-open"><label><input type="checkbox">option 1</label></li>
<li class="checkbox keep-open"><label><input type="checkbox">option 2</label></li>
<li class="checkbox keep-open"><label><input type="checkbox">option 3</label></li>
<li class="checkbox keep-open"><label><input type="checkbox">option 4</label></li>
<li><a class="btn">select</a></li>
</ul>
</span>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- custom script -->
<script>
$('.keep-open').click(function(e) {
if (/input|label/i.test(e.target.tagName)){
var parent = $(e.target).parent();
if(parent.hasClass('checkbox')){
var checkbox = parent.find('input[type=checkbox]');
checkbox.prop("checked", !checkbox.prop("checked"));
return false;
}
}
});
</script>
</body>
</html>
@haijima
Copy link
Author

haijima commented Oct 20, 2015

2015-10-20 14 59 11

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment