You can find here source code for jQuery Practice with Real Task- Part 8
YouTube link for this task video is given below :
TASK- 8 : Check/Uncheck Check Boxes on Check/Uncheck of a checkbox
Preview is:
CODE:
<!DOCTYPE html>
<html>
<head>
<title>Task-8: Check All Check Boxes on Click of a Check Box</title>
<meta charset="utf-8" />
<script src="../Scripts/jquery-3.3.1.js"></script>
</head>
<body>
<div>
<input type="checkbox" id="chkSelectAll" />Select All <br />
<input type="checkbox" class="chk" /> Option-1 <br />
<input type="checkbox" class="chk" /> Option-2 <br />
<input type="checkbox" class="chk" /> Option-3 <br />
</div>
<script>
$('#chkSelectAll').on('click', function () {
if ($('#chkSelectAll').is(':checked')) // check that checkbox is checked or not
{
// code for, if checked
$('.chk').prop('checked',true); // check all controls having class 'chk'
}
else
{
$('.chk').prop('checked', false);
}
});
</script>
</body>
</html>
YouTube link for this task video is given below :
TASK- 8 : Check/Uncheck Check Boxes on Check/Uncheck of a checkbox
Preview is:
CODE:
<!DOCTYPE html>
<html>
<head>
<title>Task-8: Check All Check Boxes on Click of a Check Box</title>
<meta charset="utf-8" />
<script src="../Scripts/jquery-3.3.1.js"></script>
</head>
<body>
<div>
<input type="checkbox" id="chkSelectAll" />Select All <br />
<input type="checkbox" class="chk" /> Option-1 <br />
<input type="checkbox" class="chk" /> Option-2 <br />
<input type="checkbox" class="chk" /> Option-3 <br />
</div>
<script>
$('#chkSelectAll').on('click', function () {
if ($('#chkSelectAll').is(':checked')) // check that checkbox is checked or not
{
// code for, if checked
$('.chk').prop('checked',true); // check all controls having class 'chk'
}
else
{
$('.chk').prop('checked', false);
}
});
</script>
</body>
</html>
Happy coding.
Rudra Pratap Singh
Software Engineer
Rudra Pratap Singh
Software Engineer
No comments:
Post a Comment