Using checkboxes to update UI in realtime

As far as I can see, your problem boils down to link checkboxes (that seem to have been generated in some way) to "division" parts of your html that you want to hide. Plus, you have to inject javascript code in the page (so I guess the less code the better).

One approach could be as follows:

// Wrap the code in an anonymus function, to avoid clustering the global space.
(function (domElements) {
    // This is the callback that will fire when a checkbox is clicked.
    function clickCallback() {
        // the context of this callback is the DOM element thus we can access its attributes through this.
        // extract the checkNumber of the class of the element. This number is the link to the division that we want to hide/show.
        var checkNumber = ((/ editoropt(\d*) /).exec(this.className))[1],
            checkBox = document.getElementById('checkboxopt' + checkNumber),
            division = document.querySelectorAll('.editoraccvar' + checkNumber)[0];

        // Hide/show division, update checkBox state.
        toggleElements(division, checkBox, window.getComputedStyle(division).display === 'none');
    }

    function toggleElements(division, checkBox, isShown) {
        // Toggle the division (show/hide) accordingly.
        division.style.display = isShown ? 'block' : 'none';
        // Due to the fact that the event listener is attached to the parent of the checkBox, we need to maintain consistency manually.
        checkBox.checked = isShown;
    }

    // Remove from the array of DOMElements those that aren't checkboxes and add a click event listener to each of them.
    domElements
            .filter(function (el) {
                return el.className.indexOf('editoropt') !== -1;
            })
            .forEach(function (el) {
                el.addEventListener('click', clickCallback, false);
            });

// Call the function passing the dom elements with class '.seq-box-form-field' as argument. Checkboxes are contained within them. Also, transform the nodelist
// into a proper array so that methods defined in Array.prototype can be used.
})([].slice.call(document.querySelectorAll('.seq-box-form-field')));

The code is commented and (I think) quite self-explanatory. However, if you have any doubt or want me to elaborate any point further, please, let me know.

Finally, here's the working fiddle.

UPDATE

Same function (more or less) but now it accepts an array of values that will correspond to the initial state of the checkboxes:

(function (domElements, cbState) {
    function clickCallback() {
        toggleElements(this.className);
    }

    function toggleElements(className, initialShow) {
        var checkNumber = ((/ editoropt(\d*) /).exec(className))[1],
            checkBox = document.getElementById('checkboxopt' + checkNumber),
            division = document.querySelectorAll('.editoraccvar' + checkNumber)[0],
            isShown = initialShow === undefined ? window.getComputedStyle(division).display === 'none' : initialShow;

        division.style.display = isShown ? 'block' : 'none';
        checkBox.checked = isShown;
    }

    domElements
            .filter(function (el) {
                return el.className.indexOf('editoropt') !== -1;
            })
            .forEach(function (el, index) {
                el.addEventListener('click', clickCallback, false);
                toggleElements(el.className, cbState[index]);
            });

// Initial state of the checkboxes goes in the second parameter. The index in the array correspond to the checkbox position in the page.
})([].slice.call(document.querySelectorAll('.seq-box-form-field')), [false, false]);

Here's the Fiddle to play with. Hope it helps.