使复选框的行为类似于单选按钮 [英] Make Checkbox behave like Radio button
本文介绍了使复选框的行为类似于单选按钮的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想要使用JS的功能，其中我的复选框的作用类似于单选按钮..
我在这里粘贴代码示例..
I want a functionality using JS where my checkboxes will act something like radio buttons..
here i am pasting an example of the code..
<script>
function get()
{
for (var loop=1; loop<=5; loop++)
{
if(document.getElementById('f'+loop).checked==true)
{
for (var loop1=1; loop1<=5; loop1++)
{
if(document.getElementById('f'+loop).id==document.getElementById('f'+loop1).id)
{
document.getElementById('f'+loop1).checked = true;
}
else
{
document.getElementById('f'+loop1).checked = false;
}
}
}
}
}
</script>
<input name="f[]" type="checkbox" id="f1" value="1" onClick="get()"/>
<input name="f[]" type="checkbox" id="f2" value="2" onClick="get()"/>
<input name="f[]" type="checkbox" id="f3" value="3" onClick="get()"/>
<input name="f[]" type="checkbox" id="f4" value="4" onClick="get()"/>
<input name="f[]" type="checkbox" id="f5" value="5" onClick="get()"/>
现在的要点是，我可以像单选按钮一样向后遍历它，但是我无法从上到下做同样的事情..如果你们中的某个人想看一眼，然后请复制并粘贴代码，看看问题是否解决.我只想简单地一次只从组中选择一张支票..
在此先感谢..
:)
Now the point is that i can traverse it backwards like the radiobutton but i fail to do the same from top to bottom.. if some one of you would like to take a look then kindly copy and paste the code and see the problem. Simply what i want is that just one check should be selected from the group at one time..
Thanks in Advance..
:)
推荐答案
看，您需要执行以下操作:
1.发生客户端的checkchanged事件.
2.即使如此，请先取消选中该组的所有复选框
3.选中调用该事件的复选框.
在这些步骤中将没有命名约定的问题.步骤1将为所有人完成.第2步将是通用的全部取消选中状态.第3步很简单，检查触发该事件的事件.
您混合了第2步和第3步-制造问题.只需单独进行操作，一切都会好起来的.
See, you need to do something like:
1. Have a checkchanged event of client side.
2. In that even, first uncheck all the checkboxes of that group
3. check the checkbox that invoked that event.
There will be no issue of naming conventions in these steps. Step 1 would be done for all. Step 2 would be a generic uncheck all. Step 3 is simple check the one that triggered the event.
You have mixed Step 2 & 3 - creating issues. Just do it separately and all will be fine.
@Sandeep ..
感谢您的答复，但桑迪普我无法做到..
您可以举一个例子给我一些解决方案吗.
@Sandeep..
Thanks for your reply but sandeep i couldn''t make it..
Can you kindly give me some solution by an example..
克里斯蒂安，您来了.我发现了多种解决方法，但是对于您来说，我一直在寻找更优化的方法.并只是参加一些礼节类的聆听，您非常需要它..下次，如果您不喜欢该帖子，请不要回复任何内容，但是请闭上您的嘴..如果您甚至是个天才，也请保持嘴巴mouth直的感觉，因为您永远不会知道那边的家伙是什么..
知道了.
这是给你的答案..
答案1:
Christian here you go..I have found out multiple ways of doing it but for you i was looking for something much more optimized. And listen just join some Etiquette classes coz you are badly in need of that.. Next time if you dont like the post dont reply on any but kindly keep your mouth shut.. If you are even a genius keep your mouth stiched coz you never know what is the guy on other side..
Got it..
Here are the answers for you..
Answer no 1:
<script>
var varPreviousSelectedID;
function get()
{
var get;
var varCheckboxes = document.getElementsByTagName('input');
for (var loop = 0; loop <=varCheckboxes.length; loop++) {
if (varCheckboxes(loop).checked == true) {
if (varPreviousSelectedID) {
if (varPreviousSelectedID == varCheckboxes(loop)) {
varCheckboxes(loop).checked = false;
}
else {
varPreviousSelectedID.checked = false;
varPreviousSelectedID = varCheckboxes(loop);
varCheckboxes(loop).checked = true;
}
}
else {
varPreviousSelectedID = varCheckboxes(loop);
}
}
}
}
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
1<input name="faa1" type="checkbox" id="f1" value="1" onClick="get()"/>
2<input name="faa1" type="checkbox" id="f2" value="2" onClick="get()"/>
3<input name="faa1" type="checkbox" id="f3" value="3" onClick="get()"/>
4<input name="faa1" type="checkbox" id="f4" value="4" onClick="get()"/>
5<input name="faa1" type="checkbox" id="f7" value="5" onClick="get()"/>
6<input name="faa1" type="checkbox" id="f5" value="6" onClick="get()"/>
7<input name="faa1" type="checkbox" id="f6" value="7" onClick="get()"/>
8<input name="faa1" type="checkbox" id="f8" value="8" onClick="get()"/>
<body>
</body>
</html>
答案2:
Answer No 2:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Checkbox Groups Act As Radio Buttons (Don't ask)</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
</head>
<body>
<form name='f1' action='#'>
<p>
<input type=checkbox name='cb1'>
<input type=checkbox name='cb1'>
<input type=checkbox name='cb1'>
<input type=checkbox name='cb1'>
<p>--------------
<p>
<input type=checkbox name='cb2'>
<input type=checkbox name='cb2'>
<input type=checkbox name='cb2'>
<input type=checkbox name='cb2'>
</form>
<script type='text/javascript'>
function Cb2Rb( setRef )
{
this.boxGroup = setRef;
for( var i=0, len=setRef.length; i<len; i++ )
setRef[ i ].onclick=( function(inst, idx){return function(){inst.scan(idx)}} )(this, i);
this.scan=function(index)
{
if( this.boxGroup[ index ].checked )
for(var i=0, g=this.boxGroup, len=g.length; i<len; i++)
if( i != index )
g[i].checked = false;
}
}
new Cb2Rb( document.forms.f1.cb1 );
new Cb2Rb( document.forms.f1.cb2 );
</script>
</body>
</html>
Answer No 3:
Answer No 3:
<script>
function get(ID)
{
var get;
for (var loop = 1; loop <= 5; loop++) {
if (document.getElementById('f' + loop).id != ID) {
document.getElementById('f' + loop).checked = false;
}
else
{
document.getElementById('f' + loop).checked = true;
}
}
}
</script>
</script>
<!
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<input name="f[]" type="checkbox" id="f1" value="1" onClick="get('f1')"/>
<input name="f[]" type="checkbox" id="f2" value="2" onClick="get('f2')"/>
<input name="f[]" type="checkbox" id="f3" value="3" onClick="get('f3')"/>
<input name="f[]" type="checkbox" id="f4" value="4" onClick="get('f4')"/>
<input name="f[]" type="checkbox" id="f5" value="5" onClick="get('f5')"/>
<body>
</body>
</html>
这篇关于使复选框的行为类似于单选按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
