jQuery实现checkbox样式的单选框详解编程语言
2023-06-13 09:11:46 时间
早就想写点博客了 一直懒着动 最近发现一些写过的东西都不记得了,下决心把自己平时遇到的问题、得到的经验记录下来,希望能大家一点帮助
这是之前写的一个模态框 要求单选 但是 要求radio的默认样式 太难看了 就想用checkbox + js 自己把它改成单选框 如下:
html代码:
div input type="checkbox" id="1" value="" label for="1" Dance of the Reed Pipes /label /div div input type="checkbox" id="2" value="" label for="2" Dance of the Reed Pies /label /div div input type="checkbox" id="3" value="" label for="3" Dance of the Reed Pipes /label /div div input type="checkbox" id="4" value="" label for="4" Dance of the Reed Pipes /label /div div 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");
这样就可以了
原创文章,作者:Maggie-Hunter,如若转载,请注明出处:https://blog.ytso.com/16878.html
cjava相关文章
- struts2:使用JQuery、JSON和AJAX处理请求详解编程语言
- jQuery序列化表单为JSON对象详解编程语言
- Jquery实现超酷的日程安排插件详解编程语言
- 基于jQuery实现 图片飞入购物车特效详解编程语言
- 正在加载中-js/jQuery功能实现详解编程语言
- jQuery禁用右键点击详解编程语言
- jquery 滚动到底部时自动加载更多详解编程语言
- jQuery实现密码强度检测详解编程语言
- jQuery实现快速平滑回到顶部详解编程语言
- 返回顶部功能jquery实现代码详解编程语言
- jQuery Google Charts—-一个封装google chart api的jquery插件详解编程语言
- $.extend()方法和(function($){…})(jQuery)详解编程语言
- jquery.post用法补充(type设置问题)详解编程语言
- jquery以及js实现option左移右移详解编程语言
- jquery实现控制表格行高亮详解编程语言
- jquery实现复选框checkbox全选(完善)详解编程语言
- jquery实现复选框checkbox全选,取消全选详解编程语言
- jQuery图片切换插件jquery.cycle.js详解编程语言
- Jquery超简单遮罩层实现代码详解编程语言
- jquery之css()改变字体大小,颜色,背景色详解编程语言
- 在jquery中怎么使用css类名和id来获取元素详解编程语言
- jQuery延迟加载(懒加载)插件 – jquery.lazyload.js详解编程语言
- jquery ajax分页写法详解编程语言
- jquery实现全选,取消,反选的功能&实现左侧菜单详解编程语言
- JQuery中关于jquery.js与jquery.min.js的比较探讨
- 分享2个jQuery插件--jquery.fileupload与artdialog