JS实现checkbox单选

iteye_11234

于 2011-01-18 10:05:23 发布

阅读量214

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript

本文链接：https://blog.youkuaiyun.com/iteye_11234/article/details/82000540

JavaScript 专栏收录该内容

25 篇文章

订阅专栏

本文介绍了一个使用JavaScript实现的单选CheckBox功能。通过一个简单的HTML页面展示了如何让拥有相同名称的CheckBox表现出单选行为。当用户点击其中一个CheckBox时，其余的CheckBox将被取消选择，确保任何时候只有一个CheckBox处于选中状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>
<BODY>
<input type="checkbox" name="cbox" value="cbox1" onClick="chooseOne(this);">checkBox1
<input type="checkbox" name="cbox" value="cbox2" onClick="chooseOne(this);">checkBox2
<input type="checkbox" name="cbox" value="cbox3" onClick="chooseOne(this);">checkBox3
<input type="checkbox" name="cbox" value="cbox4" onClick="chooseOne(this);">checkBox4
</BODY>
</html>

<script>
//chooseOne()函式
function chooseOne(cb){
//先取得同name的chekcBox的集合物件
var obj = document.getElementsByName("cbox");
for (i=0; i<obj.length; i++){
//判斷obj集合中的i元素是否為cb，若否則表示未被點選
if (obj[i]!=cb) obj[i].checked = false;
//若是但原先未被勾選則變成勾選；反之則變為未勾選
//else obj[i].checked = cb.checked;
//若要至少勾選一個的話，則把上面那行else拿掉，換用下面那行
else obj[i].checked = true;
}
}
</script>