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

本文介绍了一种使用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状态为未选中
});
});


评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值