-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdynamic_checkbox.html
71 lines (68 loc) · 1.95 KB
/
dynamic_checkbox.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<!DOCTYPE HTML>
<html>
<head>
<title> Dynamic checkbox demo</title>
<meta content="This demo takes json as input and displays checkboxes with display text and value. More detail can be found in readme file" name="description" />
<meta name="author" content="Manu Ram Pandit"/>
<meta charset="UTF-8" />
<style type="text/css">
.chkClass {
display: block;
float: left;
padding: 2px 2px 2px 2px;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
var data = [{
displayText : "Display 1",
valueText : "'Value 1'"
}, {
displayText : "Display 2",
valueText : "'Value 2'"
}, {
displayText : "Display 3",
valueText : "'Value 3'"
}, {
displayText : "Display 4",
valueText : "'Value 4'"
}, {
displayText : "Display 5",
valueText : "'Value 5'"
}];
/*
* Function Description: This function reads the json array and create checkboxes
* with corresponding display Text and value text.
* Further on click of each checkbox, the function is binded
*/
function createChexkbox() {
var container = $('#chkBoxContainer');
for (var i = 0; i < data.length; i++) {
container.append('<div>');
container.append($(document.createElement('input')).attr({
id : 'chkBox' + i,
name : 'myCheckbox',
value : data[i].valueText,
type : 'checkbox',
class : 'chkClass',
onclick : 'myFunction(' + data[i].valueText + ');'
}));
container.append('<label for="chkBox' + i + '">' + data[i].displayText + '</label>');
};
}
/*
* Sample function to handle on click of checkbox.
* User may use browser console window to see the logs.
*/
function myFunction(value) {
console.log("User clicked:" + value);
}
$(document).ready(function() {
createChexkbox();
});
</script>
</head>
<body>
<div id="chkBoxContainer"></div>
</body>
</html>