zl程序教程

您现在的位置是:首页 >  前端

当前栏目

jQuery实现checkbox样式的单选框详解编程语言

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