html自定义修改单选框多选框样式以及获取选中的值

如何定义一个单选框

<input type="radio" name="sex" id="male" value="1" />

定义type，一组单选框的name值是相同的，定义id可以让label标签指向这个元素，value是我们赋予这个单选框我们需要的值

单选框是有默认样式的无法被修改，只能将他隐藏通过label标签来模拟新的样式
代码如下：

<style>
               input[type='radio'][name='sex']{display: none;}/* 隐藏默认单选框用label来模拟 */
               input[type='radio'][name='sex']+label:after{/* 给label标签添加自定义样式 */
                   content: '';
                   display: inline-block;
                   margin-left: 10px;
                   width: 10px;
                   height: 10px;
                   border: 1px solid #0000CC;
                   }
               input[type='radio'][name='sex']:checked+label:after{background-color: #0000CC;}/* 选中样式 */
           </style>
           <section>这里是单选框</section>
           <input type="radio" name="sex" id="male" value="1" />
           <label for="male">男</label>
           <br />
           <input type="radio" name="sex" id="female" value="0" />
           <label for="female">女</label>

获取选中的单选框的值：

document.querySelector("input[type=radio][name=sex]:checked").value

多选框也是同理，下面将完整操作单选框和多选框代码贴出来

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><div><style>input[type='radio'][name='sex']{display: none;}/* 隐藏默认单选框用label来模拟 */input[type='radio'][name='sex']+label:after{/* 给label标签添加自定义样式 */content: '';display: inline-block;margin-left: 10px;width: 10px;height: 10px;border: 1px solid #0000CC;}input[type='radio'][name='sex']:checked+label:after{background-color: #0000CC;}/* 选中样式 */</style><section>这里是单选框</section><input type="radio" name="sex" id="male" value="1" /><label for="male">男</label><br /><input type="radio" name="sex" id="female" value="0" /><label for="female">女</label><button onclick='alert(document.querySelector("input[type=radio][name=sex]:checked")?document.querySelector("input[type=radio][name=sex]:checked").value:"你还没有选择")'>获取选中的值</button></div><div><style>input[type='checkbox'][name='hobby']{display: none;}/* 隐藏默认多选框用label来模拟 */input[type='checkbox'][name='hobby']+label:after{content: '';display: inline-block;margin-left: 10px;width: 10px;height: 10px;border: 1px solid #0000CC;}input[type='checkbox'][name='hobby']:checked+label:after{background-color: #0000CC;}/* 选中样式 */</style><section>这里是多选框</section><input type="checkbox" name="hobby" id="basketball" value="我爱打篮球" /><label for="basketball">篮球</label><br /><input type="checkbox" name="hobby" id="swim" value="我爱游泳" /><label for="swim">游泳</label><br /><input type="checkbox" name="hobby" id="book" value="我爱看书" /><label for="book">看书</label><!-- 与单选框的处理几乎一样，只是取数据的时候多做一些处理 --><!-- 判断是否获取到checked的多选框时，querySelector无值时返回null，视为false,querySelectorAll返回空数组[],视为true，前者做判断更方便 --><!-- 逻辑：将选中的值放到一个字符串中（也可以是数组），获取到选中多选框元素时用forEach循环把值拼起来，forEach本身无返回值即undefined，所以用|| --><button onclick='myHobby="";alert(document.querySelector("input[type=checkbox][name=hobby]:checked")?document.querySelectorAll("input[type=checkbox][name=hobby]:checked").forEach(item=>myHobby+=item.value+",")||window.myHobby:"你还没有选择")'>获取选中的值</button></div></body>
</html>

html自定义修改单选框多选框样式以及获取选中的值相关推荐

html select 多选取值,下拉框多选实现 jquery-multiselect 并获取选中的值
首选引入js文件 Option 1 Option 2 Option 3 Option 4 Option 5 Option 6 Option 7 下拉列表 $(function(){ $("# ...
el-radio（自定义样式）获取选中label值 + 选中状态 + 拼接String + post提交 - 踩坑篇
疑问: vue中怎么获取radio的选中值 .选中状态? 效果图 · 截图: 注意点: 需要使用 label传值,后台接什么,你就传什么 (这个需要和后台事先确定好) 使用@change事件,监听鼠标 ...
用jQuery实现复选框全选、反选与获取选中的复选框的值
实现效果如下所示: 全选状态: 不全选状态: 反选状态: 用jQuery实现以上效果要比js简单的多不亏是jQuery,写得少做的多话不多说,直接上代码!! html: <div class ...
php一些单选、复选框的默认选择方法（示例）
转载 http://www.php.cn/php-weizijiaocheng-360029.html 一. radio和checkbox及php select默认选择的实现代码 1.radio单选框 ...
js 实现多选框(复选框) 和单选框,下拉框功能完整示例代码附效果图
<!DOCTYPE html> <html><head><meta charset="utf-8" /><script src ...
改变单选或者复选框的样式
原理是通过定位把以前的样式覆盖掉,就酱... 代码如下: css.checkbox{position: relative;padding-left: 8px;}.checkbox:before{con ...
Python3+Selenium3+webdriver学习笔记8（单选、复选框、弹窗处理）
#!/usr/bin/env python# -*- coding:utf-8 -*-'''Selenium3+webdriver学习笔记8(单选.复选框.弹窗处理)''' from selenium ...
jQuery 单选框/复选框美化
对于前端萌新来说,美化表单是个痛苦的事情,通常都是去寻找插件这种逃避的办法,其实这并不是难事.在上篇文章中提到了兄弟元素选择器在表单美化中表现突出,下面的示例源码将体现基础篇知识的实际应用. 纯CS ...
JQuery获取选中的元素（单选框复选框）及其他等
看注释 <!DOCTYPE html> <html><head><meta charset="utf-8"><title> ...
html复选框美化插件,Labelauty – jQuery单选框/复选框美化插件
Labelauty – jQuery单选框/复选框美化插件分类:代码日期:2016-08-02 点击(38,744) 下载(0) 来源:未知收藏下拉框美化插件经常见到,如之前介绍过的 Drop ...

html自定义修改单选框多选框样式以及获取选中的值

html自定义修改单选框多选框样式以及获取选中的值相关推荐

最新文章

热门文章