サンプル

使い方

<script type="text/javascript" src="replace_checkbox.js"></script>
<script type="text/javascript">
// コンストラクタ、置換用の画像のパスを指定
var rc = new ReplaceCheckBox("nocheck.gif", "checked.gif");
// input要素を走査する特定のidを指定
rc.pickById("replace");
// img要素のマージン補正（上、右、下、左）
rc.marginSupplement(0,3,3,0);
</script>

ソース

//
// ReplaceCheckBox
//
ReplaceCheckBox = function(_def_img, _rep_img)
{
	this.def_img = _def_img;
	this.rep_img = _rep_img;
	//
	this.onLoad(this, "init");
}
ReplaceCheckBox.prototype.pickById = function(_id)
{
	this.id = _id;
}
ReplaceCheckBox.prototype.marginSupplement = function(_top, _right, _bottom, _left)
{
	this.supplement = {
		top:    _top,
		right:  _right,
		bottom: _bottom,
		left:   _left
	};
}
// private function
ReplaceCheckBox.prototype.onLoad = function(scope, func)
{
	if(window.addEventListener) window.addEventListener("load", function(e){ scope[func](e); }, false);
	else if(window.attachEvent) window.attachEvent("onload", function(e){ scope[func](e); });
}
ReplaceCheckBox.prototype.init = function()
{
	var e;
	if(this.id) e = document.getElementById(this.id).getElementsByTagName("input");
	e = this.seperateCheckbox(e);
	for(var i=0,len=e.length; i<len; i++)
	{
		e[i].style.display = "none";
		//
		var rep_el = e[i];
		var base_el = e[i].parentNode;
		var new_el = document.createElement("img");
		//
		if(base_el.tagName.match(/^label/i)) var anc_el = base_el;
		else var anc_el = new_el;
		//
		var cb = new ReplaceCheckBox.CheckBox(anc_el, new_el, rep_el);
		cb.marginSupplement(this.supplement);
		cb.replaceImage(this.def_img, this.rep_img);
		//
		base_el.insertBefore(new_el, e[i]);
	}
}
ReplaceCheckBox.prototype.seperateCheckbox = function(_nodelist)
{
	var e=[];
	for(var i=0,len=_nodelist.length; i<len; i++)
	{
		var _el = _nodelist[i];
		if(_el.getAttribute("type"))
		{
			var a = _el.getAttribute("type");
			if(a.match(/^checkbox/i)) e.push(_el);
		}
	}
	return e;
}
//
// ReplaceCheckBox.CheckBox
//
ReplaceCheckBox.CheckBox = function(_anc, _el, _rep)
{
	//anchor element
	this.anc_el = _anc;
	this.anc_el.style.cursor = "pointer";
	//new checkbox
	this.el = _el;
	this.el.style.verticalAlign = "middle";
	if(_anc==_el) this.el.style.cursor = "pointer";
	//replaced checkbox
	this.rep_el = _rep;
	//
	this.onClick(this.anc_el, this, "onClickCallback");
}
ReplaceCheckBox.CheckBox.prototype.marginSupplement = function(_supplement)
{
	this.el.style.margin = _supplement.top+"px "
						+_supplement.right+"px "
						+_supplement.bottom+"px "
						+_supplement.left+"px";
}
ReplaceCheckBox.CheckBox.prototype.replaceImage = function(_def, _rep)
{
	this.def_img = _def;
	this.rep_img = _rep;
	this.el.setAttribute("src", this.def_img);
}
ReplaceCheckBox.CheckBox.prototype.onClick = function(anc, scope, func)
{
	if(anc.addEventListener) anc.addEventListener("mousedown", function(e){ scope[func](e); }, false);
	else if(anc.attachEvent) anc.attachEvent("onmousedown", function(e){ scope[func](e);} );
}
ReplaceCheckBox.CheckBox.prototype.onClickCallback = function()
{
	if(this.el.src.indexOf(this.def_img)!=-1)
	{
		this.el.src = this.rep_img;
		this.rep_el.setAttribute("checked", "checked");
	} else {
		this.el.src = this.def_img;
		this.rep_el.setAttribute("checked", false);
		this.rep_el.removeAttribute("checked");
	}
}