Select the Boxes
Design an HTML page that contains four checkboxes with the values: Red, Green, Blue, and Black. Using jQuery functions you have to check whether the checkboxes are checked or not and also display a number of checkboxes checked. Create a <div> tag with the id "result" to display the message as specified in the below images.
Note:
Do not alter the given 'chkbox.html' file. Write your jQuery code in the file 'chkbox.js'.
Avoid writing the jQuery 'document ready' method for the proper web page visibility.
Do not use 'ES6' features.
Avoid writing the jQuery 'document ready' method for the proper web page visibility.
Do not use 'ES6' features.
Sample HTML page before checked:
Solution:
<!-- DO NOT ALTER THIS FILE -->
<!doctype html>
<html lang="en">
<body>
<form id="form">
<input type="checkbox" id="red" name="red" value="Red"/>Red
<input type="checkbox" id="green" name="green" value="Green"/>Green
<input type="checkbox" id="blue" name="blue" value=" Blue"/>Blue
<input type="checkbox" id="black" name="black" value="Black"/>Black<br/>
<div id="result">0 boxes are checked</div>
</form>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="chkbox.js"></script>
</body>
</html>
chkbox.js
//WRITE YOUR jQUERY CODE HERE
$(document).ready(function(){
var $checkboxes=$('input[type="checkbox"]');
$checkboxes.change(function(){
var cc=$checkboxes.filter(':checked').length;
if(cc==1){
$('#result').text(cc+" box is checked");
}
else{
$('#result').text(cc+" boxes are checked");
}
})
})
