Check Box Handling

Author Message

anji1
Date sent: 2014/09/19 14:32:12
<html>
<head>
<title>Check Box Handling</title>
</head>
<body>
<button class="selectall">Select All</button>
<button class="addbox">Add Check Box</button>
<button class="removebox">Remove Check Box</button>
<ul class="checklist">
<input type="checkbox" name="one" value="one" class="checkme one"><span class="one">One</span><br/>
<input type="checkbox" name="two" value="two" class="checkme two"><span class="two">two</span><br/>
<input type="checkbox" name="three" value="three" class="checkme three"><span class="three">three</span><br/>
<input type="checkbox" name="four" value="four" class="checkme four"><span class="four">four</span><br/>
<input type="checkbox" name="five" value="five" class="checkme five"><span class="five">five</span><br/>
</ul>
<button class="status">Status</button>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$('.selectall').click(function() {
$(".checkme").prop("checked","true");
});

$(".addbox").click(function(){
var checkname = prompt("Enter the name for the check box");
var flag = true;
$('.checkme').each(function() {
var x = $(this).val();
if (x === checkname){
alert("Checkbox already exits with this name");
flag = false;
}
});
if(flag){
var $ctrl = $('<input/>').attr({ type: 'checkbox', name:checkname, value:checkname}).addClass("checkme").addClass(checkname);
var $ctrlspan = $('<span/>').addClass(checkname).html(checkname);
var $ctrlbr = $('<br/>');
$(".checklist").append($ctrl);
$(".checklist").append($ctrlspan);
$(".checklist").append($ctrlbr);
}
});

$(".removebox").click(function(){
var removeval = prompt("Enter the name of the checkbox to remove");
var flag = true;

$('.checkme').each(function() {
var x = $(this).val();
if (x === removeval){
flag = false;
}
});

if(flag){
alert('Check box not exist');
}

$('.'+removeval).remove();
});


$('.checkme').on('change',function() {
alert(this.checked ? this.value : '');
});


$(".status").click(function() {
var total = $(".checkme").size();
var checked = 0;
$('.checkme').each(function() {
if(this.checked){
checked++;
}
});
var unchecked = total - checked;
alert("Total : " + total + "\nChecked :" + checked + "\nUnchecked :" + unchecked);
});

</script>
</body>
</html>
Copyright © 2013 by ustutorials. All Rights Reserved..