Use Event Handler Instead of onClick to Fire API Function

Question

I have a simple checkbox.

<div class="myCheckBox"><label><input type="checkbox" checked><span   class="label-text">My Label</span></label></div>

Note: The HTML is part of a stack that already has a unique ID assigned to it (referenced the the JS as %id%.

I want to connect it to a javascript function. I know I can use onClick in the HTML to achieve this, but in this use case I need an event handler in my javascript to call (correct term?) the function.

My JS is

$(document).ready(function() {

    var stack = $('%id%'),
        checkbox = $('.myCheckbox',stack);

    function filterCheck(%id=filterName%, %id=values%) {
            var sheet = mainViz.getWorkbook().getActiveSheet();
            var updateType;
            if(checkbox.is(":checked"))    {
                updateType = "ADD";

            } else {
                updateType = "REMOVE";
                }
            worksheetArray = sheet.getWorksheets();
            for (var i = 0; i < worksheetArray.length; i++) {
            worksheetArray[i].applyFilterAsync(filterName, values, updateType);
            }
        }  
    }

    checkbox.click(function(e) {



    }

});

The event handler (I assume) goes after the checkbox.click(function(e) { ...but I am at a moment of clueless loss. Help?

Answer 1

I could see one issue with the code.

var stack = $('%id%'),
    checkbox = $('.myCheckbox',stack);

You are not using # to reference id of element. Correct way should be either escaping the special characters

var stack = $('#\\%id\\%')

or by wrapping up dom object with jQuery Wrapper

var stack = $(document.getElementById('%id%'))

Both will help to find the stack which you have used as context below

$('.myCheckbox',stack);

event handler should work fine as given.