<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="style.css" />
<script data-require="jquery" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<h1>Basic plunk!</h1>
<p>If the header above is red, then you know Plunker is working!</p>
<p>The header above should slide right, indicating that jQuery is up and running.</p>
<!-- Put your html here! -->
<table>
<tbody>
<tr>
<td>Select all <input class="cbAll" type="checkbox" id="cbAll" value="on"></td>
<td>ID</td>
<td>Name</td>
</tr>
<tr>
<td><input class="cb" type="checkbox" id="cb0" value="0"></td>
<td>1</td>
<td>John</td>
</tr>
<tr>
<td><input class="cb" type="checkbox" id="cb1" value="1"></td>
<td>2</td>
<td>Steve</td>
</tr>
<tr>
<td><input class="cb" type="checkbox" id="cb2" value="2"></td>
<td>3</td>
<td>Tom</td>
</tr>
</tbody>
</table>
<button>check data</button>
</body>
</html>
// Add your javascript here
$(function(){
$("h1").animate({
"margin-left": "100px"
}, "slow");
var checkBoxCollection = new Array();
var cb = {};
$("input.cbAll").click(function(){
$("input.cb").each(function(index, el){
$(el).is(':checked')
? $(el).prop('checked', false)
: $(el).prop('checked', true);
}); // each
});
$("button").click(function(){
$("input.cb").each(function(index, el){
id = $(el).attr("id");
val = $(el).val();
isChecked = $(el).is(':checked');
if(isChecked){
var cells = $(el).parent().parent().children();
var cellId = cells.eq(1).text();
var cellName = cells.eq(2).text();
checkBoxCollection.push({'id': id, 'val': val, 'isChecked': isChecked, 'cellId': cellId, 'cellName': cellName});
console.log(index, id, val, cellId, cellName);
}
}); // each
console.log(checkBoxCollection);
}); // button.click
});
/* Put your css in here */
h1 {
color: red;
}