社区
JavaScript
帖子详情
如何用radio实现checkbox的效果
amethyst99
2003-05-15 01:41:53
有一个radiobox,需要点击一下,能够选中,再次点击,取消选择。
...全文
124
13
打赏
收藏
如何用radio实现checkbox的效果
有一个radiobox,需要点击一下,能够选中,再次点击,取消选择。
复制链接
扫一扫
分享
转发到动态
举报
写回复
配置赞助广告
用AI写文章
13 条
回复
切换为时间正序
请发表友善的回复…
发表回复
打赏红包
emu
2003-06-18
打赏
举报
回复
绑定了label的时候这么写:
<BODY>
<form>
<label for=test1 onclick="with(getElementById(htmlFor)){checked=emu=!checked}">aa</label>
<input type=radio name=test id=test1 onclick="return 1,checked=emu" onmouseup="checked=emu=!checked">
<label for=test2 onclick="with(getElementById(htmlFor)){checked=emu=!checked}">aa</label>
<input type=radio name=test id=test2 onclick="return 1,checked=emu" onmouseup="checked=emu=!checked">
<label for=test3 onclick="with(getElementById(htmlFor)){checked=emu=!checked}">aa</label>
<input type=radio name=test id=test3 onclick="return 1,checked=emu" onmouseup="checked=emu=!checked">
</form>
</BODY>
emu_ston
2003-05-15
打赏
举报
回复
不知还有没有更简练的通用方法?
<form>
<input type=radio onclick="return 1,checked=emu" onmouseup="checked=emu=!checked" name=z>
<input type=radio onclick="return 1,checked=emu" onmouseup="checked=emu=!checked" name=z>
<input type=radio onclick="return 1,checked=emu" onmouseup="checked=emu=!checked" name=z>
</form>
emu_ston
2003-05-15
打赏
举报
回复
简化的写法:
<form>
<input type=radio onclick="return navigator.vendor==''?(checked=emu):false" onmouseup="checked=emu=!checked" name=z>
<input type=radio onclick="return navigator.vendor==''?(checked=emu):false" onmouseup="checked=emu=!checked" name=z>
<input type=radio onclick="return navigator.vendor==''?(checked=emu):false" onmouseup="checked=emu=!checked" name=z>
</form>
另一种简化的写法:
<form>
<input type=radio onclick="return isMoz,checked=emu" onmouseup="checked=emu=!checked" name=z>
<input type=radio onclick="return isMoz,checked=emu" onmouseup="checked=emu=!checked" name=z>
<input type=radio onclick="return isMoz,checked=emu" onmouseup="checked=emu=!checked" name=z>
</form>
<SCRIPT>var isMoz=navigator.vendor=='';</SCRIPT>
emu
2003-05-15
打赏
举报
回复
呵呵,再次更正,NS下面,如果没有定义form的话radio就可以多选。
终于找到不用setTimeout的通用方法,NS6,MOZ1.3,IE5下面通过:
<form>
<input type=radio onclick="if (navigator.vendor=='')checked=this.emu;else return false" onmouseup="this.checked=this.emu=!checked" name=z>
<input type=radio onclick="if (navigator.vendor=='')checked=this.emu;else return false" onmouseup="this.checked=this.emu=!checked" name=z>
<input type=radio onclick="if (navigator.vendor=='')checked=this.emu;else return false" onmouseup="this.checked=this.emu=!checked" name=z>
<input type=radio onclick="if (navigator.vendor=='')checked=this.emu;else return false" onmouseup="this.checked=this.emu=!checked" name=z>
</form>
navigator.vendor是用来分辨NS和MOZ的,因为他们的appName和appCodeName都一样。
emu
2003-05-15
打赏
举报
回复
更正,上面的在NS下面有错:radio和checkbox一样可以多选了呵呵。
这样做在IE和MOZ下面都可以,但是又对付不了NS:
<input type=radio onclick="checked=!this.emu;" onmouseup="this.emu=checked" name=a>
<input type=radio onclick="checked=!this.emu;" onmouseup="this.emu=checked" name=a>
emu
2003-05-15
打赏
举报
回复
上面在IE和NS下面可以,在MOZ下面不接受。与上面等效的写法是:
<input type=radio name=radio0 onclick="return false" onmouseup="checked=!checked"><br>
<input type=radio name=radio0 onclick="return false" onmouseup="checked=!checked"><br>
<input type=radio name=radio0 onclick="return false" onmouseup="checked=!checked"><br>
moz就比较顽固了,除了setTimeout之外没想出什么办法可以叫它乖乖的听话。
搞搞儿的
2003-05-15
打赏
举报
回复
<script>
function changeRadio(obj) {
if (obj.checked) {obj.checked = false;}
else {obj.checked = true;}
return false;
}
</script>
<input type=radio name=radio0 onclick="return false" onmouseDown="return changeRadio(this)"><br>
emu_ston
2003-05-15
打赏
举报
回复
仅用于IE:
<input type=radio name=emu onmouseup="checkRadio()" value=0>
<input type=radio name=emu onmouseup="checkRadio()" value=1>
<input type=radio name=emu onmouseup="checkRadio()" value=2>
<input type=radio name=emu onmouseup="checkRadio()" value=3>
<br>
<input type=radio name=test onmouseup="checkRadio()" value=0>
<input type=radio name=test onmouseup="checkRadio()" value=1>
<input type=radio name=test onmouseup="checkRadio()" value=2>
<input type=radio name=test onmouseup="checkRadio()" value=3>
<SCRIPT LANGUAGE="JavaScript">
<!--
function checkRadio(){
elm=event.srcElement;
if (elm.checked) setTimeout("document.all["+elm.sourceIndex
+"].checked=false",0);
}
</SCRIPT>
IE,NS,MOZ通用:
<input type=radio name=emu onmouseup="checkRadio(this)" value=0>
<input type=radio name=emu onmouseup="checkRadio(this)" value=1>
<input type=radio name=emu onmouseup="checkRadio(this)" value=2>
<input type=radio name=emu onmouseup="checkRadio(this)" value=3>
<br>
<input type=radio name=test onmouseup="checkRadio(this)" value=0>
<input type=radio name=test onmouseup="checkRadio(this)" value=1>
<input type=radio name=test onmouseup="checkRadio(this)" value=2>
<input type=radio name=test onmouseup="checkRadio(this)" value=3>
<SCRIPT LANGUAGE="JavaScript">
<!--
function checkRadio(elm){
if (elm.checked) setTimeout("clearRadio('"+elm.name+"')",0);
}
function clearRadio(radioName){
var elms = document.getElementsByName(radioName);
for (var i=0;i<elms.length;i++)
elms[i].checked=false
}
//-->
</SCRIPT>
emu
2003-05-15
打赏
举报
回复
上面的方法在ns和moz下面通不过,应该这样写:
<input ondblclick="checked=false" type=radio name="test">
<input ondblclick="checked=false" type=radio name="test">
<input ondblclick="checked=false" type=radio name="test">
emu
2003-05-15
打赏
举报
回复
受阿信的启发:
<input onmouseup="checked=!checked;" type=radio name="test">
<input onmouseup="checked=!checked;" type=radio name="test">
<input onmouseup="checked=!checked;" type=radio name="test">
可以实现双击时取消。这个特性很不错。
emu
2003-05-15
打赏
举报
回复
<BODY>
<input type=radio name=emu onmouseup="if (checked) setTimeout('clearRadio("emu")',0)" value=0>
<input type=radio name=emu onmouseup="if (checked) setTimeout('clearRadio("emu")',0)" value=1>
<input type=radio name=emu onmouseup="if (checked) setTimeout('clearRadio("emu")',0)" value=2>
<input type=radio name=emu onmouseup="if (checked) setTimeout('clearRadio("emu")',0)" value=3>
<br>
<input type=radio name=test onmouseup="if (checked) setTimeout('clearRadio("test")',0)" value=0>
<input type=radio name=test onmouseup="if (checked) setTimeout('clearRadio("test")',0)" value=1>
<input type=radio name=test onmouseup="if (checked) setTimeout('clearRadio("test")',0)" value=2>
<input type=radio name=test onmouseup="if (checked) setTimeout('clearRadio("test")',0)" value=3>
<SCRIPT LANGUAGE="JavaScript">
<!--
function clearRadio(radioName){
var elms = document.getElementsByName(radioName);
for (var i=0;i<elms.length;i++)
elms[i].checked=false
}
//-->
</SCRIPT>
</BODY>
amethyst99
2003-05-15
打赏
举报
回复
但是加上name为什么就不行了阿????
<input onclick="checked=checked==false?true:false" type=radio name=radio0015>
fason
2003-05-15
打赏
举报
回复
<input onclick="checked=checked==false?true:false" type=radio>
使用
checkbox
实现
单选
效果
(模拟
radio
)
项目过程需要使用
radio
进行单选, 但是客户需要的是
checkbox
的样式(生成pdf表单进行打印,大家都知道,日常填的表都是方块打勾。)于是想到用Jquery控制
checkbox
来模拟
radio
的
效果
。 代码如下 $(':
checkbox
[type="
checkbox
"]').each(function(){ $(this).click(function(){
实现
Checkbox
的单选
效果
、
Radio
.Group单选框组的联动及取消
效果
两组单选框,点击上一组单选框的选项,下一组有对应变化(选择方式1、2、3时,默认选择本次,选择方式4时默认选择2),也可更改下一组默认选项,点击重置按钮,上下单选组清空。
纯CSS
实现
radio
和
checkbox
实现
效果
radio
-and-
checkbox
纯CSS
实现
radio
和
checkbox
实现
效果
reset-
radio
在开发PC端的项目时,经常会用到
radio
和
checkbox
组件,可是因为原生的样式相对来说不符合设计师的设计风格,所以我们可能会经常引用第三方的模块去
实现
,或者通过JS等其他方式去hack。这样相对来说增加了代码量不说,还特...
html5多选框
实现
单选,input:
checkbox
多选框
实现
单选
效果
跟
radio
一样
最近遇到一个小小的问题,就是有时候我们使用单选
radio
的时候,会发现当我们选中一个之后,再也无法一个都不选了,即选中后没有取消的功能,此时便想到了功能强大的
checkbox
,但他是多选,怎么才能让他变成单选,
效果
跟
radio
一样呢,本菜鸟就自己写了个小程序,代码很简单,只有四行。废话不多说,直接代码:无标题文档$(function(){$(":
checkbox
").click(function(...
php多选框
radio
,input:
checkbox
多选框
实现
单选
效果
跟
radio
一样
最近遇到一个小小的问题,就是有时候我们使用单选
radio
的时候,会发现当我们选中一个之后,再也无法一个都不选了,即选中后没有取消的功能,此时便想到了功能强大的
checkbox
,但他是多选,怎么才能让他变成单选,
效果
跟
radio
一样呢,本菜鸟就自己写了个小程序,代码很简单,只有四行。废话不多说,直接代码: 无标题文档$(function(){$(":
checkbox
").click(function...
JavaScript
87,987
社区成员
224,683
社区内容
发帖
与我相关
我的任务
JavaScript
Web 开发 JavaScript
复制链接
扫一扫
分享
社区描述
Web 开发 JavaScript
社区管理员
加入社区
获取链接或二维码
近7日
近30日
至今
加载中
查看更多榜单
社区公告
暂无公告
试试用AI创作助手写篇文章吧
+ 用AI写文章