使用css+javaScript來改變radio和checkbox的默認樣式

一、使用css+javaScript改變radio的樣式

1、普通的radio

圖示：

html代碼

<div style="float:left;"><label class="label_title">海報模板：</label></div>
<div style="float:left;margin-left:5px;" id="lottery_model">
<input type="radio" id="input_radio_model_1" class="input_radio_style" checked="checked" name="model" value="1" />
<label name="input_radio_model_1" class="input_radio_checked" >模板1</label>
<input type="radio" id="input_radio_model_2" class="input_radio_style" name="model" value="2" />
<label name="input_radio_model_2" class="input_radio_nochecked" >模板2</label> 
</div>

css代碼

/*所有radio樣式*/
		.input_radio_style{
			display:none;
			margin:0px;
			padding:0px;
		}
		/*radio label 樣式*/
		.input_radio_checked{
			background: url(img/check_pink.png) right bottom no-repeat white;
			height:26px;
			line-height:26px;
			border: 2px solid #ed5564;
			padding:0px 10px;
			/* color: #4d6980; 藍*/
			/* color: #319b00; 綠*/
			color: #ed5564;
			display:inline-block; 
		}
		.input_radio_nochecked{
			background: white;
			height:26px;
			line-height:26px;
			border: 2px solid #b1b8bd;
			padding:0px 10px;
			display:inline-block; 
		}
		.input_radio_mouseover{
			background: white;
			height:26px;
			line-height:26px;
			border: 2px solid #fa838f;
			padding:0px 10px;
			display:inline-block; 
		}

javaScript代碼

window.onload = function(){
	var modelLabels = document.getElementById('lottery_model').getElementsByTagName('label');
	var modelRadios = document.getElementById('lottery_model').getElementsByTagName('input');
	addRadioListen(modelLabels,modelRadios);
}
//添加radio點擊事件監聽
		function addRadioListen(labels,radios){
			for(i=0,j=labels.length ; i<j ; i++){
				labels[i].onclick=function(){
					if(this.className == 'input_radio_nochecked' || this.className == 'input_radio_mouseover'){
						for(k=0,l=labels.length ; k<l ; k++){
							labels[k].className='input_radio_nochecked';
							radios[k].checked = false;
						}
						this.className='input_radio_checked';
						document.getElementById(this.attributes["name"].nodeValue).checked = true;
					}
			  	};
			  	
			  	labels[i].onmouseover=function(){
					if(this.className == 'input_radio_nochecked'){
						this.className='input_radio_mouseover';
					}
				};
				
				labels[i].onmouseout=function(){
					if(this.className == 'input_radio_mouseover'){
						this.className='input_radio_nochecked';
					}
				};
			}
		}

2、類似開關的radio

圖示：

html代碼

<div style="float:left;"><label class="label_title">當前狀態：</label></div>
<div style="float:left;">
<input type="radio" id="input_radio_state_OPEN" class="input_radio_style"  name="state" value="OPEN" />
<input type="radio" id="input_radio_state_CLOSE" class="input_radio_style" checked="checked" name="state" value="CLOSE" />
<label id="lottery_state_button" class="input_radio_state_close_img"></label> 
</div>

css代碼

/*開啓關閉按鈕*/
		.input_radio_state_open_img{
			background: url(img/state_open.png) no-repeat;
			width:92px;
			height:32px;
			margin-left:5px;
			display:inline-block; 
			cursor: pointer;
		}
		.input_radio_state_close_img{
			background: url(img/state_close.png) no-repeat;
			width:92px;
			height:32px;
			margin-left:5px;
			display:inline-block; 
			cursor: pointer;
		}
		/*所有radio樣式*/
		.input_radio_style{
			display:none;
			margin:0px;
			padding:0px;
		}

javaScript代碼（這裏使用了jquery框架）

$("#lottery_state_button").click(function(){
				var str = $("#lottery_state_button").attr("class");
				if(str == 'input_radio_state_open_img'){
					$("#lottery_state_button").attr("class","input_radio_state_close_img");
					document.getElementById('input_radio_state_CLOSE').checked = true;
				}else if(str == 'input_radio_state_close_img'){
					$("#lottery_state_button").attr("class","input_radio_state_open_img");
					document.getElementById('input_radio_state_OPEN').checked = true;
				}
			});

二、使用css+javaScript來改變checkbox樣式
圖示：

html代碼

<div id="div_interest">
<input id="input_checkbox_football" class="input_checkbox_style" type="checkbox" name="interest" value="1" checked="checked"/>
<label name="input_checkbox_football" class="input_checkbox_checked" >足球</label> 
<input id="input_checkbox_basketball" class="input_checkbox_style" type="checkbox" name="interest" value="2"/>
<label name="input_checkbox_basketball" class="input_checkbox_nochecked" >籃球</label> 
</div>

css代碼

.input_checkbox_style{
			display: none;
		}	
		.input_checkbox_checked{
			background: url(images/checkbox_yes.png) left center no-repeat white;
			height:26px;
			line-height:26px;
			padding-left:30px;
			color: #ed5564;
			display:inline-block; 
		}
		.input_checkbox_nochecked{
			background: url(images/checkbox_no.png) left center no-repeat white;
			height:26px;
			line-height:26px;
			padding-left:30px;
			color: #ed5564;
			display:inline-block; 
		}

javaScript代碼

window.onload = function(){
			var Labels = document.getElementById('div_interest').getElementsByTagName('label');
			var CheckBoxs = document.getElementById('div_interest').getElementsByTagName('input');
			addCheckBoxListen(Labels,CheckBoxs);
		}
		//添加動作監聽
		function addCheckBoxListen(labels,checks){
			for(i=0,j=labels.length ; i<j ; i++){
				labels[i].onclick=function(){
					if(this.className == 'input_checkbox_nochecked'){
						this.className='input_checkbox_checked';
						document.getElementById(this.attributes["name"].nodeValue).checked = true;
			   		}else if(this.className == 'input_checkbox_checked'){
			   			this.className='input_checkbox_nochecked';
						document.getElementById(this.attributes["name"].nodeValue).checked = false;
			   		}
			  	};
			}
		}