Кастомный селект, чекбокс, радио
 

Кастомный селект, чекбокс, радио.

Нужно вызвать класс Form и дать ему первым параметром узел формы, вторым объект с свойствами select и switches, пример ниже.
В свою очередь свойство select - это объект где имя свойства это name определенного селекта а значение объект с коллбеками и число.
А свойство switches - это просто массив с именами радокнопок или чекбоксов которые надо кастомизировать.

В итоге родные элементы будут скрыты, а вместо них будут узлы которые будут выполнять их функции, а получившийся объект получает свойства расписанные ниже. Объект form будет иметь свойства одноименные атрибутам name элементов. Внутри скрипта они реализуются классами Select и Switches.

Какое дерево узлов создается можно посмотреть в примерах в конце поста.

var form = new Form(document.forms[0], {
	select: {
		citys: { // name селекта
			innerLi: innerLi, 
			wrapTitle: wrapperTitle,
			lengthTitle: 15 // длина в символах после которой последует многоточие в div title (для select multiple)
		},
		city: {
			innerLi: innerLi,
			wrapTitle: wrapperTitle,
			lengthTitle: 15
		},
		country: {
			innerLi: innerLi,
			wrapTitle: wrapperTitle,
			lengthTitle: 38
		}
	},
	switches: ['voteLessons', 'voteVOv', 'voteMusic']
});

// param text: option.text
// param i: номер в списке
// возвращается строка которая будет вставлена в li
function innerLi(text, i) {
	return '<span>'+text+'</span>';
}

// param title: div с классом title 
// возвращается узел он вставится вместо div с классом title 
function wrapperTitle(title) {
	return createElem('div',
		createElem('div', title, { attrs: { className: 'arrow' }}),
		{ attrs: { className: 'shadow' }}
	);
}
		
/*

--- СЕЛЕКТЫ ---
Свойства:
form.citys = объект Select представляющий данный селект
form.citys.options = массив узлов option также доступных по номеру и по value, например:
form.citys.options.vl = <option value="vl">Владимир</option>
form.citys.options[0] = <option value="vl">Владимир</option>

form.citys.lists[n] = массив узлов li 
эти узлы попадают (один li на котором произошел клик) в функцию form.citys.change(li)
и у них есть свойства
form.citys.lists[n].option = родной узел option 
form.citys.lists[n].index = номер в списке
вот так:
form.citys.change(li) {
	li.index == li.option.index;
}

form.citys.ul = узел ul 
form.citys.title = узел div с классом 'title' 
form.citys.select = узел div с классом 'select + имя селекта' 
form.citys.nativeSelect = узел родного узла select который скрыт

Методы:
param: узел li или узел option или номер
param: true или false - установить selected или снять
form.citys.setSelected(3, bool)

param: узел li или узел option или номер
param: true или false - установить disabled или снять
form.citys.setDisabled(option, bool)

Методы не смотрят на текущее состояние, например если вызвать setSelected 
с item-ом у которого флаг disable то он сменится на selected и наоборот.


 --- РАДИО, ЧЕКБОКСЫ --- 
Свойства:
form.voteLessons = объект Switch представляющий один экземпляр на одно имя в форме
form.voteLessons.wrapSwitches[n] = массив узлов div с классом равным имени данных радио или чекбоксов в форме
form.voteLessons.switches[n] = массив узлов div с классом checked disabled или '' в зависимости от состояния

C form.voteLessons.change аналогично как с селектами

form.voteLessons.switches[n].nativeSwitch = родной узел radio или checkbox
form.voteLessons.switches[n].index = номер в списке
form.voteLessons.nativeSwitches = родной html collection представляющий данное имя в форме
form.voteLessons.index = номер в списке

Методы:
param: узел div или узел input или номер
param: true или false - установить checked или снять
form.voteLessons.setChecked(div, bool)

param: узел div или узел input или номер
param: true или false - установить disabled или снять
form.voteLessons.setDisabled(div, bool)


Можно определить функцию change которая будет выполнена при изменении состояния пользователем (клик).
В нее попадут узлы на которых произошел клик. Например в них могут быть доступны (описание выше):
form.voteLessons.change = function(div) {
	this.switches; 
	this.wrapSwitches; 
	this.nativeSwitches; 
	this.setChecked(); 
	this.setDisabled(); 
	div.index;
	div.nativeSwitch;
	div.nativeSwitch.index;
}

Примеры функции change:
// Найти все пункты с атрибутом selected
form.country.change = function(li) {
	var str = '';
	for(var i=0; i<this.options.length; i+=1) {
		if(this.options[i].selected)
			str += this.lists[i].option.text + '; ';
	}
	console.log(str);
}

// Найти все пункты с атрибутом selected и задизаблить соседний
form.country.change = function(li) {
	for(var i=0; i<this.lists.length; i+=1) {
		if(this.lists[i].className == 'selected')
			this.setDisabled(i+1, true);
	}
}

//Если выбрали Владимир, то раздизаблить Москву
form.citys.change = function(li) {
	if(li.option.value == 'vl')
		this.setDisabled(this.options.ms, false);
}

И последнее. 
Объект Form предоставляет метод submit:
form.submit() просто укороченная запись, например document.forms[0].submit();

Объект Form позволяет назначить функцию load которая выполнится после всей инициализации.
В ней можно поменять что-нибудь, например:
form.load = function() {
	this.country.title.innerHTML = 'Settings counrty...';
	this.citys.title.innerHTML = 'Settings city...';
}
*/

Свёрстанные примеры
http://showjs.netii.net/select1.html
http://showjs.netii.net/select2.html

Нажав Send можно посмотреть, что выдает форма.