单选框 | 易学教程

关于单选框和复选框按钮自定义

阅读更多关于关于单选框和复选框按钮自定义

很多时候我们不需要浏览器自带的单选框按钮样式我们想吧单选框按钮图标换成我们自己想要的图标这里我自己琢磨出来有2种方式可以实现第一种是用图片来代替单选按钮通过js来控制图片这种方法实现起来很简单就不列代码了主要说第二种第二种是使用css来控制单选框图标先将input标签隐藏起来然后給 label标签添加背景图完整代码如下可以找2张宽20的图片来写个demo <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .zz { background: url(./public/images/ic_g.png) no-repeat; padding-left: 20px; background-position: center left; } input[type=radio]:checked+label { background: url(./public/images/ic_g

常见form表单5种input输入类型

阅读更多关于常见form表单5种input输入类型

HTML表单用于收集不同类型的用户输入，表单是一个包含表单元素的区域。表单元素是允许用户在表单中输入内容，比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。表单使用表单标签<form>来设置 1 <form> 2 input elements 3 </form> HTML 表单 - 输入元素多数情况下被用到的表单标签是输入标签（<input>），<input>>元素是最重要的表单元素。输入类型是由类型属性（type）定义的，大多数经常被用到的输入类型如下：文本域（Text Fields）密码字段单选按钮（Radio Buttons）复选框（Checkboxes）提交按钮(Submit Button) 一、什么是文本域（Text Fields）？文本域通过标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。注意:表单本身并不可见。同时，在大多数浏览器中，文本域的缺省宽度是20个字符。 First name: Last name: 1 <form> 2 First name: <input type="text" name="firstname"><br> 3 Last name: <input type="text" name="lastname"> 4 </form> 二

ionic-CSS：ionic 单选框

阅读更多关于 ionic-CSS：ionic 单选框

ylbtech-ionic-CSS：ionic 单选框 1. 返回顶部 1、 ionic 单选框 ionic 单选按钮与标准 type="radio" 的 input元素类似。以下展示了现代app类型的单选按钮。每个 item-radio 中的 type="radio" 的 input 元素的 name 属性都相同。radio-icon 类用于是否显示图标。 ionic 在单选项中使用了 <label> 元素，使其更易点击。实例 <div class="list"> <label class="item item-radio"> <input type="radio" name="group" value="go" checked="checked"> <div class="radio-content"> <div class="item-content"> Go </div> <i class="radio-icon ion-checkmark"></i> </div> </label> <label class="item item-radio"> <input type="radio" name="group" value="python"> <div class="radio-content"> <div class="item-content"> Python <

表单标签

阅读更多关于表单标签

1.概念：表单是用于采集用户输入的数据的使用的标签：form form用于定义表单。可以定一个范围，范围代表采集用户数据的范围。属性：　　1.action：提交数据的URL 　　2.method：指定提交方式　　　　 get：1.请求参数会在地址栏中显示，会封装到请求行中　　　　　　 2.请求参数长度是有限制的　　　　　　 3.不太安全　　　　post：1.请求参数不会在地址栏中显示，会封装在请求体中（HTTP协议中讲）　　　　　　　2.请求参数的长度是没有限制的　　　　　　　3.较为安全表单项的数据要写被提交，必须指定其name属性 2.表单项标签 1.input：可以通过type属性值，来改变元素的样式　　1.type = “ * ”：　　　　*.text：文本输入框，默认值　　　　　　placeholder：指定输入框的提示信息，当输入框的内容发生变化，会自动清空提示信息。　　　　*.password：密码输入框　　　　*.radio：单选框　　　　　　注：1.要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样；　　　　　　　　 2.一般会给每一个单选框提供value属性，指定其被选中后提交的值；　　　　　　　　 3.checked属性，可以指定默认值。　　　　*.checkbox：复选框　　　　　　注： 1

css3写单选框，复选框

阅读更多关于 css3写单选框，复选框

废话不多说直接看图:复选框的选中喝未选中的，哈哈哈，截图截的不够好，请谅解。直接上代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> input[type=checkbox]{ /*同样，首先去除浏览器默认样式*/ -webkit-appearance: none; -moz-appearance: none; appearance: none; /*编辑我们自己的样式*/ position: relative; width: 20px; height: 20px; background: transparent; border:1px solid #00BFFF; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; outline: none; cursor: pointer; } input[type=checkbox]:after{ content: '\2714'; position: absolute; display: block; width: 100%; height: 100%; background: #00BFFF; color: #fff; text

Mui-js获取单选框值

阅读更多关于 Mui-js获取单选框值

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title> <script src="js/mui.min.js"></script> <link href="css/mui.min.css" rel="stylesheet" /> <script type="text/javascript" charset="utf-8"> mui.init(); </script> </head> <body> <header class="mui-bar mui-bar-nav">  <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <h1 class="mui-title">测试属性checkbox</h1> </header> <div class="mui-content"> <div class="mui-input-row mui-radio

浅谈uniapp项目购物车业务逻辑

阅读更多关于浅谈uniapp项目购物车业务逻辑

购物车逻辑可以说是一个电商项目的重中之重，也是本人较为薄弱的一环。本次疫情，闲置在家，便做了一个小demo，也算是进一步锻炼一下购物车逻辑。下面便跟大家简单分享一下本次的经验，大佬勿喷。疫情当前，逆战不怠，武汉加油，中国加油。购物车效果图：一、在用户加入商品至购物车时，首先得判断，当前是否处于登录状态？如果未登录，则不能添加，并跳转至登录界面；如果已登录，则根据添加商品的信息发送请求，将商品添加至购物车列表数据二、添加商品成功后，转至购物车页面时，在onshow生命周期函数中判断是否登录，如果未登录则跳转至登录界面，如果已登录，则将购物车列表数据请求下来，以便渲染页面。如果没有数据，则显示购物车空空，如果有数据则渲染页面。三、页面渲染完毕后，就涉及到商品总数量以及总价的计算。总价和总数量可以通过计算属性获得，通过遍历购物车列表数据，就可以实现总价和总数量的获取四、单个商品数量加、减和删除，以及总价总数量的事实更新。加、减：先实现视图化的加、减，再将加减后的数值连带着token、cartid去请求数据以实现后台数据的实时更新。删除：将点击删除的商品的cartid以及token获取到，并发送后台请求数据，以实现后台数据的实时更新，并将视图化的数据更新。五、全选和反选首先，在uniapp中，checkbox是没有change事件的

JS 实现单选框和多选框

阅读更多关于 JS 实现单选框和多选框

1 来源： https://www.cnblogs.com/ltfxy/p/12329606.html

微信小程序-radio单选框

阅读更多关于微信小程序-radio单选框

微信小程序-radio单选框 demo.wxml  < radio-group bindchange = " bandleChange " > < radio color = " red " value = " male " > 男 </ radio > < radio color = " red " value = " female " > 女 </ radio > </ radio-group > < view > 您选中的是:{{ gender }} </ view > demo.js // pages/demo14/demo14.js Page ( { /** * 页面的初始数据 */ data : { gender : "" } , bandleChange ( e ) { // 1 获取单选框中的值 let gender = e . detail . value ; // 2 把值赋值给 data 中的数据 this . setData ( { // gender:gender gender } ) } } ) 示例来源： CSDN 作者

vue中单选框与多选框的实现与美化

阅读更多关于 vue中单选框与多选框的实现与美化

我们在做一些页面时，可能会用到很多的单选框和复选框，但是原生的radio和checkbox前面的原型图标或方框样式不尽人意。于是，决定自己来实现单选框和复选框。我用的是vue，所以就用vue的方式实现单选和复选框。下面来看一下单选框的实现： template  <span class="selfRadio" @click="clickRadio(1)"> <span class="selfRadioImgBox"> <img v-show="radioVal==1" src="../assets/img/checked.png" alt="选中图标"> <img v-show="radioVal!=1" src="../assets/img/noCheck.png" alt="未选中图标"> </span> 单选框 </span> <span class="selfRadio" @click="clickRadio(2)"> <span class="selfRadioImgBox"> <img v-show="radioVal==2" src="../assets/img/checked.png" alt="选中图标"> <img v-show="radioVal!=2" src="../assets/img/noCheck.png" alt=

订阅单选框