javascript - Checkbox not working. Trying to dynamically add/remove gridlines in flot. -

javascript - Checkbox not working. Trying to dynamically add/remove gridlines in flot. -

i'll add together code i'll explain.

segment of relevant html:

<div id='gridbutton'> <form> <input type="checkbox" id="gridcheck" value="showgrid">show grid </form> </div>

i used 2 different kinds of ways test checkboxes , neither of them worked.

version 1:

$('#gridcheck').on('change', function(){ if(gridtoggle = 0) { gridtoggle = null; } else { gridtoggle = 0; } });

version 2:

$('#gridcheck').on('click', function(){ if ($(this).is(':checked')){ gridtoggle = null; } else { gridtoggle = 0; } });

here's gridtoggle connected (this part of overall options):

xaxis: {min: -10, max: 60, ticklength: gridtoggle}, yaxis: {min: -5, max:40, ticklength: gridtoggle}

so problem i'm having when checkbox clicked won't alter gridlines. if manually set them in code however, work.

few thoughts:

1.) if(gridtoggle = 0) { wrong, think mean if(gridtoggle == 0) {

2.) input tag missing element close, should be:

<input type="checkbox" id="gridcheck" value="showgrid" />

3.) lastly (your real problem), need redraw chart after changing property:

$('#gridcheck').on('change', function(){ var gridtoggle = $(this).is(':checked') ? null : 0; // on or off var opts = myplot.getoptions(); opts.xaxes[0].ticklength = gridtoggle; // modify existing plot options opts.yaxes[0].ticklength = gridtoggle; myplot.setupgrid(); // re-init grid myplot.draw(); // , redraw });

here's fiddle.

javascript jquery html dom flot