HTML File
<div class="chbox">
<br />
</div>
<input type="checkbox" class="ch" id="selectall" />Select All
<br />
<input type="text" id="txtName" />
<br />
<input type="button" id="btn4" value="AddCheckbox"/>
<br />
<input type="checkbox" value="Manish" id="cb1"/>
<label for="cb1">Manish</label>undefined</div>undefined<br />undefined<input type="button" class="bt1" id="btn1"value="submit" />undefined<input type="button" class="bt2" id="btn2" value="Inventor" />undefined<input type="button" class="bt3" id="btn3" value="Clear" />Javascript File
$(document).ready(function() {
$("#btn1").click(function() {
$(".chbox").text('');
$(".div2 input:checkbox").each(function() {
var $this = $(this);
var str = "";
if ($this.is(":checked")) {
$(".chbox").text($(".chbox").text() + " , " + $this.attr("value"));
}
var checked = $("input:checked").length > 0;
if (!checked) {
alert("Please check at least one checkbox");
return false;
}
});
});
$("#btn4").click(function() {
addCheckbox($('#txtName').val());
$("#txtName").val('');
});
function addCheckbox(name) {
var container = $('.div2');
var inputs = container.find('input');
var id = inputs.length + 1; {
$('<input />', {
type: 'checkbox',
id: 'cb1' + id,
value: name
}).appendTo(container);
$('<label />', {
'for': 'cb1',
text: name
}).appendTo(container);
}
}
$('#btn2').click(function() {
$(".div2 input:checkbox").each(function() {
var $a = $(this);
if ($a.is(":checked")) {
($a.attr('checked', false));
} else if ($a.is(":not(:checked)")) {
($a.attr('checked', true));
}
});
});
$("#btn3").click(function() {
$("input:checkbox").removeAttr('checked');
$(".chbox").text('');
});
$("#selectall").change(function() {
if (this.checked) {
$(".div2 input:checkbox").each(function() {
this.checked = true;
})
} else {
$(".div2 input:checkbox").each(function() {
this.checked = false;
})
}
});