1.有一个checkbox列表
2.每次操作,只能勾选一个或取消一个
3.上述操作,排除已勾选的项(即已经勾选了一个,这个不计算在内,不能被取消)
jquery checkbox列表一次只能选中或取消一个,不包括之前勾选的项
- 写回答
- 好问题 0 提建议
- 追加酬金
- 关注问题
- 邀请回答
-
4条回答 默认 最新
- 阿里嘎多学长 2024-07-23 17:04关注
以下内容由AIGC及阿里嘎多学长共同生成、有用望采纳:
要实现这个功能,你可以使用以下 jQuery 代码。这段代码将监听 checkbox 的点击事件,并根据你的要求更新选中状态。
$(document).ready(function() { // 监听所有 checkbox 的点击事件 $('input[type="checkbox"]').on('click', function(e) { // 阻止默认行为,防止checkbox状态被立即切换 e.preventDefault(); var $checkbox = $(this); var checkedCount = $('input[type="checkbox"]:checked').length; // 如果当前只有一个checkbox被选中,允许切换选中状态 if (checkedCount === 1) { // 切换当前checkbox的状态 $checkbox.prop('checked', !$checkbox.prop('checked')); } else if (checkedCount > 1) { // 如果有多个checkbox被选中,取消最后一个勾选的checkbox $('input[type="checkbox"]:checked').last().prop('checked', false); } }); });
这段代码的工作流程如下:
- 当文档加载完成后,为所有类型为 checkbox 的
<input>
元素绑定点击事件。 - 点击事件触发时,首先阻止默认行为,以控制checkbox的选中状态。
- 计算当前已勾选的 checkbox 数量。
- 如果只有一个 checkbox 被勾选,允许用户切换当前点击的 checkbox 的选中状态。
- 如果有多个 checkbox 被勾选,只取消最后一个被勾选的 checkbox 的选中状态。
请注意,这段代码假设你的 HTML 结构中 checkbox 列表已经定义好,并且每个 checkbox 都有一个
<input type="checkbox">
标签。此外,这段代码没有处理初始状态,即页面加载时可能已经有一个或多个 checkbox 被选中的情况。如果需要处理这种情况,你可以在$(document).ready
函数中添加额外的逻辑来初始化状态。本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏 举报 编辑记录 - 当文档加载完成后,为所有类型为 checkbox 的
悬赏问题
- ¥15 网络分析设施点无法识别
- ¥15 状态图的并发态问题咨询
- ¥15 PFC3D,plot
- ¥15 VAE模型编程报错无法解决
- ¥100 基于SVM的信息粒化时序回归预测,有偿求解!
- ¥15 物体组批优化问题-数学建模求解答
- ¥15 微信原生小程序tabBar编译报错
- ¥350 麦克风声源定位坐标不准
- ¥15 apifox与swagger使用
- ¥15 egg异步请求返回404的问题