Select the Boxes jQuery Cognizant Handson Program
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.
chkbox.js
//WRITE YOUR jQUERY CODE HERE var count=0; $('#red').change(function(){ var isChecked=$(this).is(":checked"); if (isChecked) { count++; if(count==1){ $('#result').html(count+" box is checked"); }else{ $('#result').html(count+" boxes are checked"); } } else { count--; if(count==1){ $('#result').html(count+" box is checked"); }else{ $('#result').html(count+" boxes are checked"); } } }) $('#green').change(function(){ var isChecked=$(this).is(":checked"); if (isChecked) { count++; if(count==1){ $('#result').html(count+" box is checked"); }else{ $('#result').html(count+" boxes are checked"); } } else { count--; if(count==1){ $('#result').html(count+" box is checked"); }else{ $('#result').html(count+" boxes are checked"); } } }) $('#blue').change(function(){ var isChecked=$(this).is(":checked"); if (isChecked) { count++; if(count==1){ $('#result').html(count+" box is checked"); }else{ $('#result').html(count+" boxes are checked"); } } else { count--; if(count==1){ $('#result').html(count+" box is checked"); }else{ $('#result').html(count+" boxes are checked"); } } }) $('#black').change(function(){ var isChecked=$(this).is(":checked"); if (isChecked) { count++; if(count==1){ $('#result').html(count+" box is checked"); }else{ $('#result').html(count+" boxes are checked"); } } else { count--; if(count==1){ $('#result').html(count+" box is checked"); }else{ $('#result').html(count+" boxes are checked"); } } })