页面导航：首页 → 网络编程 → JavaScript → 表单特效 → 正文内容 radio list

javascript radio list的实现细节(多浏览器兼容)

发布：dxy 字体：[增加减小] 类型：转载

非常不错的radio list的效果实现代码

可支持方向键
当radio最后一个选中时，按小键盘后会自动跳回第一个
checked可自动触发onclick
支持各种浏览器,cross-browser

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>Rank's HTML document</title> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<meta http-equiv="Pragma" content="no-cache"> 
<meta http-equiv="Cache-Control" content="no-cache"> 
<meta http-equiv="Expires" content="0"> 
<meta http-equiv="ImageToolbar" content="no"> 
<meta http-equiv="Creator.name" content="Rank, BlueDestiny, never-online"> 
<style type="text/css" title="default" media="screen"> 
/*<![CDATA[*/ 
body { font:13px/1.5 arial; } 
/*]]>*/ 
</style> 
</head> 
<body> 
<h1>radio list的妙用</h1> 
<ol> 
<li>可支持方向键</li> 
<li>当radio最后一个选中时，按小键盘后会自动跳回第一个</li> 
<li>checked可自动触发onclick</li> 
<li>支持各种浏览器,cross-browser</li> 
</ol> 
<h2>demo</h2> 
<p id="wrap"> 
<input name="radio_n" type="radio"><input name="radio_n" type="radio"><input name="radio_n" type="radio"><span id="ad"></span> 
 
<script type="text/javascript">//<![CDATA[ 
document.getElementById('wrap').onclick = function () { 
document.getElementById('ad').innerHTML = ('never-online \'s weblog') + Math.random(); 
} 
//]]></script> 
</body> 
</html>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

Tags：javascript radio list

复制链接收藏本文打印本文关闭本文返回首页

上一篇：一个判断email合法性的函数[非正则]

下一篇：select下拉选择框美化实现代码(js+css+图片)

文章评论

共有位脚本之家网友发表了评论我来说两句

javascript radio list的实现细节(多浏览器兼容)

同类文章

文章评论

最近更新

热点排行

javascript radio list的实现细节(多浏览器兼容)

同类文章

文章评论

最 近 更 新

热 点 排 行

最近更新

热点排行