Jquery effect on checkbox checked status

Question

I am trying to achieve a checkbox option to detect the state of the checkbox - If the checkbox is checked, then run the function, if someone checks off, it should shut off the function.

Currently, the function works only if its not checked, and when a user checks the box, the function starts up, but you cant disable it.

var nbDrop = 150; 

// function to generate a random number range.
function randRange( minNum, maxNum) {
  return (Math.floor(Math.random() * (maxNum - minNum + 1)) + minNum);
}

// function to generate drops
function createRain() {

    for( i=1;i<nbDrop;i++) {
    var dropLeft = randRange(0,1260);
    var dropTop = randRange(-1000,1400);

    $('.rain').append('<div class="drop" id="drop'+i+'"></div>');
    $('#drop'+i).css('left',dropLeft);
    $('#drop'+i).css('top',dropTop);
    }

}

Jquery checked function

$('input[name="purerain"]').on('click', function(){
    if(!$(this).is(':checked')) {

    } else {
        createRain();
    }
});

Answer 1

Here's the code that works for you.

$('input[name="purerain"]').change(function(){
   if($(this).is(':checked')) {
       createRain();
   }
});