Edit in JSFiddle

/*=========================================================================================================
    AUTHOR: JÉRÉMIE JACQUES (http://jeremiejacques.be)
    TITLE: PASSWORD GENERATOR
    VERSION: 1.0
    LAST MODIFIED: Sun 7th June 2015
    DESCR: Little experience with pure javascript.
    SOURCES:    
=========================================================================================================*/

var btnGenerate = document.getElementById('btnGenerate');
    btnGenerate.onclick = function(){GeneratePassword(); event.preventDefault();}

function GeneratePassword() {
    var passwordLength= document.generatorPassword.nbrCaract.options[document.generatorPassword.nbrCaract.selectedIndex].value;
    var resultPassword = "";
    

    var lowercase = 1,
        letter = (document.generatorPassword.letter.checked),
        uppercase = (document.generatorPassword.uppercase.checked),
        number = (document.generatorPassword.number.checked),
        punctuation = (document.generatorPassword.punctuation.checked);            

    for(i=1; i <= passwordLength; i++){
        var randomNum = getRandomNum();
        if((punctuation == 0 && checkPunc(randomNum)) || (number == 0 && checkNumber(randomNum)) ||(uppercase == 0 && checkUppercase(randomNum)) ||(letter == 0 && checkLetter(randomNum))){
            i -= 1;
        }else{
            resultPassword = resultPassword + String.fromCharCode(randomNum); // get from ascii table
        }
    }
    document.generatorPassword.result.value = resultPassword;
    return true;
}

function getRandomNum() {
    var rndNum = Math.random(); // between 0 - 1
    rndNum = parseInt(rndNum * 1000); // rndNum from 0 - 1000
    rndNum = (rndNum % 94) + 33; // rndNum from 33 - 127
    return rndNum;
}

function checkPunc(num){ /* ascii table : all special carracter  */
    if(((num >=33) && (num <=47)) || ((num >=58) && (num <=64))){ return true;}  
    if(((num >=91) && (num <=96)) || ((num >=123) && (num <=126))){ return true;}
    return false;
}

function checkNumber(num){
    if((num >=48) && (num <=57)){ return true;}  /* ascii table : 48 = 0 ; 57 = 9 */
    else{return false;}
}

function checkUppercase(num){
    if((num >=65) && (num <=90)){ return true;}  /* ascii table : 65 = A ; 90 = Z */
    else {return false;}
}

function checkLetter(num){
    if((num >=97) && (num <=122)){ return true;} /* ascii table : 97 = a ; 122 = z */
    else {return false;}
}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div class="container">
<h1>Password generator.</h1>
<form action="#" method="#" accept-charset="utf-8" name="generatorPassword" class="generatorPassword">
    <div>
        <label for="nbrCaract">Number of characters :</label>
        <select name="nbrCaract" id="nbrCaract">
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12" selected="selected">12</option>
            <option value="13">13</option>
            <option value="14">14</option>
            <option value="15">15</option>
            <option value="16">16</option>
            <option value="17">17</option>
            <option value="18">18</option>
            <option value="19">19</option>
            <option value="20">20</option>
        </select>
    </div>
<div class="options">
    <div>
        <input type="checkbox" name="letter" id="letter" checked="checked" />
        <label for="letter">Include lower case</label>
    </div>
    <div>
        <input type="checkbox" name="uppercase" id="uppercase" checked="checked" />
        <label for="uppercase">Include upper case</label>
    </div>
    <div>
        <input type="checkbox" name="number" id="number" checked="checked" />
        <label for="number">Include numbers</label>
    </div>
    <div>
        <input type="checkbox" name="punctuation" id="punctuation" checked="checked" />
        <label for="punctuation">Include special characters</label>
    </div>
</div>
    <div>
        <input type="text" name="result" value="" id="result" />
        <button id="btnGenerate" class="btn"><span class="fa fa-refresh"></span></button>
    </div>               
</form>
</div>
    
        
        
        
        
body{
    margin: 0;
    padding: 0;
    background: #6B8AAA;
}

h1, label{
    margin-top: 0px;
    font-family: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: 400;
}
label{cursor: pointer;}
.container{
    height: 310px;
    width: 300px;
    background: #fff;
    margin: 0 auto;
    margin-top: 5vh;
    padding: 70px;
    border-radius: 8px;
}

div{
  margin: 12px auto;
}

input{outline:none;}
.btn{
    display: inline-block;
    margin-bottom: 0;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    white-space: nowrap;
    padding: 10px 15px;
    font-size: 15px;
    line-height: 1.42857143;
    border-radius: 0px 4px 4px 0px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    color: #ffffff;
    background-color: #6B8AAA;
}

.btn:hover, .btn:active{
    color: #ffffff;
    background-color: #445669;
    border-color: #74898a;
    outline: none;
}

#result{
    float: left;
    height: 19px;
    padding: 11px 15px;
    font-size: 15px;
    line-height: 1.42857143;
    color: #2c3e50;
    background-color: #ffffff;
    background-image: none;
    border: 1px solid #dce4ec;
    border-radius: 4px 0px 0px 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
    width: 210px;
}


input[type=checkbox]{
    width: 15px;
    height: 15px;
    cursor: pointer;
    background: -webkit-linear-gradient(top, #757E87 0%, #6B8AAA 100%);
      background: linear-gradient(to bottom, #757E87 0%, #6B8AAA 100%);
    border-radius: 4px;
    box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.4);
    -webkit-appearance: none;
    position: relative;
    float: left;
    margin-right: 5px;
}

input[type=checkbox]::after{
    content: '';
    width: 7px;
    height: 4px;
    position: absolute;
    top: 3px;
    left: 3px;
    border: 3px solid #fcfff4;
    border-top: none;
    border-right: none;
    background: transparent;
    opacity: 0;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

input[type=checkbox]:checked::after{
    opacity: .8;
}

select#nbrCaract{
    height: 30px;
    border: none;
    width: 60px;
    background-color: rgb(107, 138, 170);
    outline: none;
    margin-left: 5px;
}

.options{
    margin: 30px 0;
}