jQuery --- 实现 checkbox 样式的单选框

　　早就想写点博客了一直懒着动最近发现一些写过的东西都不记得了，下决心把自己平时遇到的问题、得到的经验记录下来，希望能大家一点帮助

　　这是之前写的一个模态框要求单选但是要求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']");//当前点击的checkboxcobj.prop("checked", true);//将当前点击的checkbox置为选中状态//over
})

　　代码并不复杂挺简单的，如果想获取点击的id，只要再加一句

var itemId = cobj.attr("id");

　　这样就可以了

转载于:https://www.cnblogs.com/yinshuai/p/8378368.html

jQuery --- 实现 checkbox 样式的单选框相关推荐

jquery 获取或设置radio单选框选中值的方法
jquery 获取或设置radio单选框选中值的代码 1.获取选中值,三种方法都可以: 2.设置第一个Radio为选中值: 3.设置最后一个Radio为选中值: 4.根据索引值设置任意一个radio为 ...
vue2实现自定义样式radio单选框
先上效果 <div class="reply">主编已回复:<div class="radio-box" v-for="(item, ...
普通html和vue单选框的样式,vue2实现自定义样式radio单选框
先上效果主编已回复: {{item.label}} js: data() { return { radio: '1', radios:[ { label: '是', value:'1', isChe ...
html input单选样式,input单选框美化——自定义样式
方法一: 给input添加 -webkit-appearance: none; 隐藏默认样式.然后添加自己的样式就好了. 例如: .radioBox input{ -webkit-appearance ...
html5 漂亮单选按钮样式,10个HTML5美化版复选框和单选框
单选框html 一.CSS3漂亮的自定义Checkbox复选框 9款迷人样式以前咱们分享过一款很是不错的CSS3自定义checkbox复选框纯CSS3美化Checkbox和Radiobox按钮,外观 ...
js 实现多选框(复选框) 和单选框,下拉框功能完整示例代码附效果图
<!DOCTYPE html> <html><head><meta charset="utf-8" /><script src ...
html表单设置单选框,html如何实现表单的选择框效果？单选框与多选框的实现（代码实例）...
在使用表单提交数据的时候,为了减少用户的一些操作,使用选择框是一个好主意.本章给大家介绍html如何实现表单的选择框效果?单选框与复选框的实现(代码实例).通过单选框代码和复选框代码实例,实现单选框样 ...
【实现选定单选框出现对应的选择框或输入框】
一.写好全部显示时的样式(单选框和要同步对应显示的内容) 二.v-model绑定单选框的参数三.用v-if,如果form.mode的名称内容恒等于 '某值' 时显示特定对应的内容 <el-co ...
Element el-radio 单选框详解
点此查看全部文字教程.视频教程.源代码本文目录 1. 用途 2. 单选框 3. 单选框样式 4. 单选框组 4. 单选框组样式 5. 尺寸调节 6. 绑定值变化事件 7. 小结 1. 用途单选框使 ...

jQuery --- 实现 checkbox 样式的单选框

jQuery --- 实现 checkbox 样式的单选框相关推荐

最新文章

热门文章