jQuery --- 实现 checkbox 样式的单选框
jQuery 实现 --- 样式 checkbox 单选框
2023-09-14 09:00:18 时间
这是之前写的一个模态框 要求单选 但是 要求radio的默认样式 太难看了 就想用checkbox + js 自己把它改成单选框 如下:
html代码:
<div class="list-item"> <input type="checkbox" id="1" value=""> <label for="1">Dance of the Reed Pipes</label> </div> <div class="list-item"> <input type="checkbox" id="2" value=""> <label for="2">Dance of the Reed Pies</label> </div> <div class="list-item"> <input type="checkbox" id="3" value=""> <label for="3">Dance of the Reed Pipes</label> </div> <div class="list-item"> <input type="checkbox" id="4" value=""> <label for="4">Dance of the Reed Pipes</label> </div> <div class="list-item"> <input type="checkbox" id="5" value=""> <label for="5">Dance of the Reed Pipes</label> </div>
js代码:
$(".list-item").click(function(){ $(".list-item").find("input[type='checkbox']").prop("checked", false);//每次点击前,将所有checkbox置为 未选中 var cobj = $(this).find("input[type='checkbox']");//当前点击的checkbox cobj.prop("checked", true);//将当前点击的checkbox置为选中状态 //over })
代码并不复杂 挺简单的 ,如果想获取点击的id,只要再加一句
var itemId = cobj.attr("id");
这样就可以了
相关文章
- jquery监听浏览器刷新_jQuery刷新浏览器页面大小
- jquery 正则表达式验证_前端正则校验
- jQuery WeUI:WeUI 的jQuery实现版
- jQuery 图片播放插件 FancyBox 和其 WordPress 插件
- Jquery超简单遮罩层实现代码详解编程语言
- ASP.NET开发者使用jQuery应该了解的几件事情
- jQuery工具函数学习资料
- jQuery-ui中自动完成实现方法
- 24款非常有用的jQuery插件分享
- jQuery创建插件的代码分析
- 50款非常棒的jQuery插件分享
- jquery移除button的inlineonclick事件(已测试及兼容浏览器)
- Jquery实现带动画效果的经典二级导航菜单
- jquery实现excel导出的方法
- 使用jquery实现简单的ajax
- jQuery的ajax传参巧用JSON使用示例(附Json插件)
- JQuery对class属性的操作实现按钮开关效果
- jquery动态增加删除表格行的小例子
- jquery.autocomplete修改实现键盘上下键自动填充示例
- jquery实现checkbox全选全不选的简单实例
- 基于JQuery实现的Select级联
- jquery实现背景墙聚光灯效果示例分享
- JS、DOM和JQuery之间的关系示例分析
- jQuery实现单击按钮遮罩弹出对话框(仿天猫的删除对话框)
- jquery提交表单mvc3后台处理示例
- JQuery调用WebServices的方法和4个实例
- 使用jquery选择器如何获取父级元素、同级元素、子元素
- jquery实现倒计时代码分享
- 详解jquery中$.ajax方法提交表单
- Jquery选择器中使用变量实现动态选择例子