一、使用css+javaScript改变radio的样式
1、普通的radio
图示:
html代码
<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 >
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; } }; } }