如何用radio实现checkbox的效果

amethyst99 2003-05-15 01:41:53
有一个radiobox，需要点击一下，能够选中，再次点击，取消选择。
...全文
122 13 打赏 收藏 转发到动态 举报
写回复
用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）
本文介绍了一种使用jQuery控制checkbox来模拟radio按钮效果的方法。通过限制相同name属性的checkbox只能有一个被选中，实现了类似radio按钮的功能。
实现Checkbox的单选效果、Radio.Group单选框组的联动及取消效果
该文详细介绍了如何在React应用中实现Checkbox组件的单选效果，通过禁用其他选项来实现单选，并展示了Radio.Group单选框组的联动及取消功能。当选择特定选项时，会触发另一组单选框的相应变化，同时提供了一个重置按钮来清除所有选择。
纯CSS实现radio和checkbox实现效果
本文介绍了一种使用纯CSS实现自定义样式Radio和Checkbox的方法，通过对原生input元素进行扩展，无需额外JavaScript代码即可达到良好的视觉效果。
html5多选框实现单选,input:checkbox多选框实现单选效果跟radio一样
本文介绍了一种使用Checkbox实现类似Radio按钮单选效果的方法。通过简单的JavaScript代码，可以在不破坏用户体验的前提下，为Checkbox添加单选功能，同时保留了Checkbox本身的优势。
checkbox实现radio效果
本文详细介绍了如何使用HTML创建复选框，并通过JavaScript控制其状态，包括取消所有复选框并仅选中被点击的复选框的功能实现。
JavaScript

87,987

社区成员

224,683

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章