JQuery string 'randomizer' clustering characters

JQuery string 'randomizer' clustering characters

I'm trying to create a password generator based on the options provided by
the user. My current script allows users to select uppercase, lowercase,
numeric and special characters. This works perfectly and strings are
generated to to the user's required length however upon generation,
numbers cluster at the string with letters clustering at the beginning. A
single special character parts the two. Do you have any suggestions on how
to improve the process?
$('document').ready(function() {
$('button').click(function() {
var lower = "";
var upper = "";
var numeric = "";
var special = "";
var string_length = "";
if($('#12').is(':checked')) { string_length = 12; };
if($('#16').is(':checked')) { string_length = 16; };
if($('#18').is(':checked')) { string_length = 18; };
if($('#22').is(':checked')) { string_length = 22; };
if($('#24').is(':checked')) { string_length = 24; };
if($('#custom').is(':checked')) { $('#custom').show();
$('#custom').val(); } else { $('#custom').hide(); };
if($('#ch1').is(':checked')) { lower = "abcdefghijklmnopqrstuvwxyz"; }
else { lower = ""; };
if($('#ch2').is(':checked')) { upper = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; }
else { upper = ""; };
if($('#ch3').is(':checked')) { numeric = "0123456789"; } else {
numeric = ""; };
if($('#ch4').is(':checked')) { special = "!£$%^&*()_-+={};:@~#?/"; }
else { special = ""; };
var chars = lower + upper + numeric + special;
var randomstring = '';
var charCount = 0;
var numCount = 0;
for (var i=0; i<string_length; i++) {
if((Math.floor(Math.random() * 2) == 0) && numCount < 3 ||
charCount >= 5) {
var rnum = Math.floor(Math.random() * 10);
randomstring += rnum;
numCount += 1;
} else {
var rnum = Math.floor(Math.random() * chars.length);
randomstring += chars.substring(rnum,rnum+1);
charCount += 1;
}
}
$('span.string').html(randomstring);
});
});
The options 16 length, lowercase, uppercase, numeric and special
characters returns something like e046pzw%65760294.