实现页面中input checkbox复选框为单选功能

最新推荐文章于 2025-06-07 22:15:50 发布

siyi_blog

最新推荐文章于 2025-06-07 22:15:50 发布

阅读量2.3w

点赞数 5

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/siyi_blog/article/details/80905904

本文介绍了一种使用jQuery实现单选Checkbox的方法。通过设置点击事件，当点击任一Checkbox时，仅该Checkbox被选中，其余Checkbox均取消选中状态。

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

思路：设置当前点击节点的checkbox的值为true，其他节点checkbox的值设置为false。

注意：js代码要在文档加载完成后执行才生效，即在$(function(){})中写你的js代码，如果HTML代码本身就在js代码前，$(function(){})则可有可无。

html代码：

<div>
    <input type="checkbox" /><span>1</span>
    <input type="checkbox" /><span>2</span>
    <input type="checkbox" /><span>3</span>
    <input type="checkbox" /><span>4</span>
    <input type="checkbox" /><span>5</span>
    <input type="checkbox" /><span>6</span>
</div>

jQuery代码：

$(function(){
    $(":checkbox").click(function(){
//设置当前选中checkbox的状态为checked
    $(this).attr("checked",true);
    $(this).siblings().attr("checked",false); //设置当前选中的checkbox同级(兄弟级)其他checkbox状态为未选中
});
});