Как создать присвоить класс div при множественном условии
 

Доброго времени суток уважаемые форумчане и не судите строго, только начинаю изучать тему.
Помогите пожалуйста с разобраться с проблемой есть форма с checkbox'ами и radiobutton'ами не могу написать условие что при сочетании действий (например активна radiobutton id="3" и нажат checkbox ="id2" присвоить класс .10 - div'у.test). Заранее благодарен за помощь !

<style>
.test {
    color: red;
}
</style>

<form>
<label><input type="radio" name="r" value="1" /> 1</label>
<label><input type="radio" name="r" value="10" /> 10</label>
<label><input type="radio" name="r" value="100" /> 100</label>

<input type="checkbox" name="c" />
</form>

<div>TEST</div>

<script>
document.querySelector('form').addEventListener('change', function() {
    document.querySelector('div').classList.toggle('test', this.r.value==10 && this.c.checked)
})
</script>

Не увлекайтесь id.