Untitled

<!DOCTYPE html>
<html>
<head>

<style>
/* Лучше выносить в отдельный файл и подключать тут же */
    body{padding: 20px}
    .b-example-form{max-width: 300px}
    .b-example-form__frame{margin-bottom: 20px; border: 2px solid}
    .b-example-form ul{margin: 0; padding: 0; list-style: none}

    .b-example-form.mod_1 .b-example-form__frame label{background-color: aqua}
    .b-example-form.mod_2 .b-example-form__frame{
        border-top-color: chartreuse;
        border-right-color: darkorange;
        border-bottom-color: cyan;
        border-left-color: brown;
    }
</style>

</head>
<body>

<form class="b-example-form">
    <fieldset class="b-example-form__frame">
        <legend>Какими браузерами Вы пользуетесь:</legend>
        <ul>
            <li class="b-example-form__item chrome">
                <input type='checkbox' name="browser"
                    value="chrome" id="chrome" />
                <label for="chrome">Google Chrome</label>
            </li>
            <li class="b-example-form__item opera">
                <input type='checkbox' name="browser"
                    value="opera" id="opera" />
                <label for="opera">Opera</label>
            </li>
            <li class="b-example-form__item ie">
                <input type='checkbox' name="browser"
                    value="ie" id="ie" />
                <label for="ie">Internet Explorer</label>
            </li>
        </ul>
    </fieldset>
    <button>Отправить</button>
</form>

</body>

<script>
// Лучше выносить в отдельный файл и подключать в конце тела страницы

(function(){ // Изолирование кода, чтобы не засорять глобал.
    // Выбираем все элементы с классом .b-example-form
    var blocks = document.querySelectorAll('.b-example-form');

    // Перебор блоков если они есть (в данном случае будет всего одна итерация)
    blocks && blocks.forEach(function(block) {
        var model = [];

        // Находим элементы формы
        var items = block.querySelectorAll('.b-example-form__item');

        // Перебираем, если элементы есть
        items && items.forEach(function(item) {

            // Добавляем в модель
            var item = {
                element: item.querySelector('[type="checkbox"]'),
                get value() {return this.element.value},
                get state() {return this.element.checked}
            }

            model.push(item);

            // Вешаем обработчк событий (в данном случае просто обновление вида)
            item.element.addEventListener('change', update);

        });

        // Функция для доступа к элементам модели
        function get_by_value(value) {
            return model.find(function(item) {
                return item.value === value
            });
        }

        function update() {
            // Первое условие
            (function() {
                var item = get_by_value('ie');

                if (item.state) {
                    block.classList.add('mod_1');
                } else {
                    block.classList.remove('mod_1');
                }
            })();

            // Второе условие
            (function() {
                var item_1 = get_by_value('chrome');
                var item_2 = get_by_value('opera');

                if (item_1.state && item_2.state) {
                    block.classList.add('mod_2');
                } else {
                    block.classList.remove('mod_2');
                }

            })();
        }
    });
})();

</script>
</html>