如何用radio实现checkbox的效果

amethyst99 2003-05-15 01:41:53
有一个radiobox，需要点击一下，能够选中，再次点击，取消选择。
...全文
124 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）
项目过程需要使用 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

社区内容

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

加载中

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

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

+ 用AI写文章