Community Learn Tools Library Leisure

English

Home > Web Front-end > JS Tutorial > Code for beautifying checkbox and radio controls using jquery and pictures (packaged download)_jquery

Code for beautifying checkbox and radio controls using jquery and pictures (packaged download)_jquery

WBOY

Release： 2016-05-16 18:16:32

Original

1322 people have browsed it

效果图:
Code for beautifying checkbox and radio controls using jquery and pictures (packaged download)_jquery
HTML:

复制代码代码如下:

aaaaaa
bbbbbb
ccccc
ddddd

AAAAAA
BBBBBBBB
CCCCCC
DDDDDD

JS:

复制代码代码如下:

 
$(function(){ 
$('#chklist').hcheckbox(); 
$('#radiolist').hradio(); 
$('#btnOK').click(function(){ 
var checkedValues = new Array(); 
$('#chklist :checkbox').each(function(){ 
if($(this).is(':checked')) 
{ 
checkedValues.push($(this).val()); 
} 
}); 
alert(checkedValues.join(',')); 
alert($('#radiolist :checked').val()); 
}) 
}); 

引入jquery文件是必须的
还有一个是 checkbox 的插件JS文件 jquery-hcheckbox.js, 在下载的压缩包中有源文件和 DEMO
如果在此基础上您做出了更美的请通知我哦~~
演示地址 http://demo.jb51.net/js/jQuery_HCheckbox/index.html
打包下载地址

Related labels：

Radio beautify

source：php.cn

Previous article：jquery-based selection tag to text field effect, multiple selection/repeat filtering/limited number implementation code_jquery Next article：A very creative scroll bar clock animation based on MooTools_javascript skills

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn