custom-checkbox-radio-buttons.js

(function() {
	function ncCreateCustomEvent(eventName) {
		//this function is used to create custom events in Javascript
		//you can use your own if you already have one
		var customEvent;
		if (typeof window.Event == 'function') {
			customEvent = new Event(eventName, {'bubbles': false, 'cancelable': true});
		} else {
			//fallback for IE - initEvent is deprecated but this will run only for IE9/IE10
			customEvent = document.createEvent('Event');
			customEvent.initEvent(eventName, false, true);
		}
		return customEvent;
	}

	function ncCheckOption(event) {
		//an input has been selected/deselected -> we need to trigger the icon animation
		event.target.nextElementSibling.getElementsByTagName('svg')[0].dispatchEvent(ncCreateCustomEvent('animate'));
		//if the input is a radio input, we need to deselect all the siblings 
		if(event.target.type == 'radio') ncResetRadio(this, event);
	}

	function ncResetRadio(wrapper, input) {
		var radioInput = wrapper.querySelectorAll('input[type=radio]:not(:checked)'),
			resetEvent = ncCreateCustomEvent('reset');
		for( var i = 0; radioInput.length > i; i++ ) {
			radioInput[i].nextElementSibling.getElementsByTagName('svg')[0].dispatchEvent(resetEvent);
		}
	}

	var formButtons = document.getElementsByClassName('js-nc-form-buttons');
	if( formButtons ) {
		for( var i = 0; formButtons.length > i; i++ ) {
			formButtons[i].addEventListener('change', ncCheckOption);
		}
	}
}());