Select the Boxes jQuery Cognizant Handson Program

Bymadwithcode

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");
      }
  }
})

Similar Posts