<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>Custom Plunker</title>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.0/css/bootstrap-combined.min.css"
rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.0/js/bootstrap.min.js"></script>
<style type="text/css">
li {list-style: none}
input[type="checkbox"] {margin-left: 8px}
</style>
<script>
$(function() {
$('.checkbox').click(function(){
console.log($(this));
console.log($(this).val());
});
});
$( ":checkbox" ).map(function(index, someElement) {
console.log(index);
console.log(someElement);
return this.id;
});
</script>
</head>
<body>
<form>
<ul>
<li>First<input class="checkbox" type="checkbox" value="1"></li>
<li>Second<input class="checkbox" type="checkbox" value="2"></li>
<li>Third<input class="checkbox" type="checkbox" value="3"></li>
</ul>
</form>
</body>
</html>