css 樣式

/*wrapper divs 複選框與單選框樣式 */
.custom-checkbox,.custom-radio{position:relative;}
/* input, label positioning 該樣式控制checkbox  */
.custom-checkbox input{position:absolute;left:2px;top:0px;margin:0;}
.custom-checkbox label{display:block;position:relative;padding-right:1em;line-height:1;padding:.7em 0 .5em 30px;margin:0 0 .3em;cursor:pointer;}
/* states */
.custom-checkbox label{background:url(checkbox.gif) no-repeat;}
.custom-radio label{background:url(radiobutton.gif) no-repeat;}
.custom-checkbox label,.custom-radio label{background-position:-10px -14px;}
.custom-checkbox label.hover,.custom-checkbox label.focus,.custom-radio label.hover,.custom-radio label.focus{background-position:-10px -114px;}
.custom-checkbox label.checked,.custom-radio label.checked{background-position:-10px -214px;}
.custom-checkbox label.checkedHover,.custom-checkbox label.checkedFocus{background-position:-10px -314px;}
.custom-checkbox label.focus,.custom-radio label.focus{outline:1px dotted #ccc;}
/* input, label positioning 該樣式控制radio */
.custom-radio input{position:absolute;left:2px;top:2px;margin:0;}
.custom-radio label{display:block;position:relative;padding-right:1em;line-height:1;padding:.7em 0 .5em 30px;margin:0 0 .3em;cursor:pointer;}

js
jQuery.fn.customInput = function(){
return $(this).each(function(){
if($(this).is('[type=checkbox],[type=radio]')){
var input = $(this);

// 使用輸入的ID得到相關的標籤
var label = $('label[for='+input.attr('id')+']');

// 包裹在一個div輸入+標籤
input.add(label).wrapAll('<div class="custom-'+ input.attr('type') +'"></div>');

// 必要的瀏覽器不支援：hover偽類的標籤
label.hover(
function(){ $(this).addClass('hover'); },
function(){ $(this).removeClass('hover'); }
);

//繫結自定義事件，觸發它，繫結點選，焦點，模糊事件
input.bind('updateState', function(){
input.is(':checked') ? label.addClass('checked') : label.removeClass('checked checkedHover checkedFocus'); 
})
.trigger('updateState')
.click(function(){ 
$('input[name='+ $(this).attr('name') +']').trigger('updateState'); 
})
.focus(function(){ 
label.addClass('focus'); 
if(input.is(':checked')){  $(this).addClass('checkedFocus'); } 
})
.blur(function(){ label.removeClass('focus checkedFocus'); });
}
});
};

jsp 頁面寫法

<td style="border: 0px"><input name="ghContent" id="ghbox6"
class="inputbox" type="radio" value="液壓站" /> <label
for="ghbox6">液壓站</label>

js 渲染 $('.inputbox').customInput(); //格式化複選框和單選框

點選打岔效果

jsp 頁面寫法

<td style="border: 0px"><input name="ghContent" id="ghbox6"
class="inputbox" type="radio" value="液壓站" /> <label
for="ghbox6">液壓站</label>

js 渲染 $('.inputbox').cusInput(); //格式化複選框和單選框

js 新增程式碼

jQuery.fn.cusInput = function(){
return $(this).each(function(){
if($(this).is('[type=checkbox]')){
var input = $(this);

// 使用輸入的ID得到相關的標籤
var label = $('label[for='+input.attr('id')+']');

// 包裹在一個div輸入+標籤
input.add(label).wrapAll('<div class="cus-'+ input.attr('type') +'"></div>');

// 必要的瀏覽器不支援：hover偽類的標籤
label.hover(
function(){ $(this).addClass('hover'); },
function(){ $(this).removeClass('hover'); }
);

//繫結自定義事件，觸發它，繫結點選，焦點，模糊事件
input.bind('updateState', function(){
input.is(':checked') ? label.addClass('checked') : label.removeClass('checked checkedHover checkedFocus'); 
})
.trigger('updateState')
.click(function(){ 
$('input[name='+ $(this).attr('name') +']').trigger('updateState'); 
})
.focus(function(){ 
label.addClass('focus'); 
if(input.is(':checked')){  $(this).addClass('checkedFocus'); } 
})
.blur(function(){ label.removeClass('focus checkedFocus'); });
}
});
};

css新增程式碼

/** 差號顯示 */
.cus-checkbox input{position:absolute;left:2px;top:0px;margin:0;}
.cus-checkbox label{display:block;position:relative;padding-right:1em;line-height:1;padding:.7em 0 .5em 30px;margin:0 0 .3em;cursor:pointer;}

.cus-checkbox label{background:url(checkbox_cha.gif) no-repeat;}
.cus-checkbox label{background-position:-10px -14px;}
.cus-checkbox label.hover,.cus-checkbox label.focus{background-position:-10px -114px;}
.cus-checkbox label.checked{background-position:-10px -214px;}
.cus-checkbox label.checkedHover,.cus-checkbox label.checkedFocus{background-position:-10px -314px;}
.cus-checkbox label.focus{outline:1px dotted #ccc;}

在我的資源中有寫好的列子