<div>
<label><input type="checkbox" data-param="param1" class="link-changer">param 1</label>
<label><input type="checkbox" data-param="param2" class="link-changer">param 2</label>
<label><input type="checkbox" data-param="param3" class="link-changer">param 3</label>
<label><input type="checkbox" data-param="param4" class="link-changer">param 4</label>
</div>
<div>
<a href="/test" class="change-on-check">test 1</a><br>
<a href="/test" class="change-on-check">test 2</a><br>
<a href="/test" class="change-on-check">test 3</a><br>
</div>
var links = document.getElementsByClassName('change-on-check');
Array.prototype.forEach.call(links, function(link) {
link.href += '?';
});
Array.prototype.forEach.call(
document.getElementsByClassName('link-changer'),
function(checkbox) {
checkbox.addEventListiner('change', onChange, false);
}
);
function onChange(event) {
var param = '&' + encodeURIComponent(event.target.getAttribute('data-param'));
var add = event.target.checked;
Array.prototype.forEach.call(links, function(link) {
if(add) {
link.href += param;
} else {
link.href = link.href.replace(param, '');
}
});
}