点击文字选中单选框或复选框

在选择单选框或者复选框的时候,点击圆点或者方框不太好点,就有了点击文字选中的需求,之前一直想的是用js实现,后来发现一个比较方便的方法。

就是把选项和文字外加label标签,如:

<label>
<input type="radio" value="A" name="1">A.选项A
</label>
<label>
<input type="radio" value="B" name="1">B.选项B
</label>
<label>
<input type="radio" value="C" name="1">C.选项C
</label>
<label>
<input type="radio" value="D" name="1">D.选项D
</label>

这样就可以实现了。

时间: 2024-10-22 02:11:55

点击文字选中单选框或复选框的相关文章

html与用户交互中单选框与复选框&amp;下拉列表中的情况

使用单选框.复选框,让用户选择 在使用表单设计调查表时,为了减少用户的操作,使用选择框是一个好主意,html中有两种选择框,即单选框和复选框,两者的区别是单选框中的选项用户只能选择一项,而复选框中用户可以任意选择多项,甚至全选.请看下面的例子: 语法: <input type="radio/checkbox" value="值" name="名称" checked="checked"/> 1.type: 当 typ

Selenium—选择框的相关操作(单选框、多选框、复选框、下拉框)

编辑框 无缺省值:第二个输入框 可直接对输入框进行编辑: driver.find_element_by_id('input2').send_keys('selenium') 有缺省值:第一个输入框,默认 test 此时,如果我们直接对第一个输入框进行编辑,会发现与预期结果不符 driver.find_element_by_id('input1').send_keys('selenium') 因此,如果需要对存在默认值的输入框进行编辑,则需先进行清楚操作,然后再进行编辑 driver.find_e

selenium3+python自动化10-基本操作2(单选框、复选框、table定位)

一.前言 本次总结是对之前内容的扩充selenium3+python自动化6-基本操作总结(键盘.鼠标.select下拉框) ,包含单元框和复选框操作.table定位等内容. 二.单选框(radiobox)和复选框(checkbox)操作 1.认识单选框和复选框 html代码如下: <html> <head> <title>单选和复选</title> </head> <body> </form> <h4>单选:

vue.js实现单选框、复选框和下拉框

Vue.js可以很方便的实现数据双向绑定,所以在处理表单,人机交互方面具有很大的优势.下边以单选框.复选框和下拉框为例介绍他们在HTML和Vue.js中的具体实现方式. 一.单选框 在传统的HTML中实现单选框的方法如下: <div id="app"> <input type="radio" name="gender" value="man" id="man"/><label

20151220学习内容:Web之单选框、复选框

单选框:RadioButton RadioButton中有个属性GroupName,当单选时,必须把各个选项的组名设成同一个 查看按钮是否选中:bool sex = RadioButton1.Checked; Label1.Text = sex.ToString(); 单选按钮列表:RadioButtonList 属性:RepeatDirection:横向或纵向 绑定数据: TextDataContext context = new TextDataContext(); RadioButtonL

使用单选框、复选框,让用户选择

在使用表单设计调查表时,为了减少用户的操作,使用选择框是一个好主意,html中有两种选择框,即单选框和复选框,两者的区别是单选框中的选项用户只能选择一项,而复选框中用户可以任意选择多项,甚至全选.请看下面的例子: 语法: <input type="radio/checkbox" value="值" name="名称" checked="checked"/> 1.type: 当 type="radio&qu

CSS学习笔记三:自定义单选框,复选框,开关

一点一点学习CCS,这次学习了如何自定义单选框,复选框以及开关. 一.单选框 1.先写好body里面的样式,先写几个框 1 <body> 2 <div class="radio-1"> 3 <input type="radio" name="radio-1" id="radio-1-1"> 4 <label for="radio-1-1"></label

微信小程序-修改单选框和复选框大小的方法

方法有两种: 一:采用css的zoom属性 zoom缩放会将元素保持在左上角,并且会有毛边,可能会稍稍改变元素原来的形状. 二:采用css3的transform:scale属性 zoom缩放会将元素保持在中间,不会改变元素原来的形状,但是可能会有稍稍的模糊. 整体来说zoom属性与transform:scale属性主要存在如下几点差异 1.zoom的缩放是相对于左上角的:而scale默认是居中缩放:2.zoom的缩放改变了元素占据的空间大小:而scale的缩放占据的原始尺寸不变,页面布局不会发生

[CSS揭秘]自定义单选框和复选框

很多Web前端工程师肯定都会遇到过,在项目中,UI设计师跑来跟你说,我这个地方的表单控件需要设计成这个样子那个样子.但是用CSS却不能够修改这些控件的默认样式,于是乎,只能通过div+javascript技术来进行模拟.特别是在如今移动端的崛起时代,更加注重用户的体验.于是就更加需要这样一种hack技术. 如果对如今的前端框架有过了解,都会知道组件这个概念.那么在这些框架中,都会提供一些单选框或复选框按钮组件.可见大家之前受到表单元素的默认样式的毒害有多深. 今天先给大家简单介绍一下如何通过CS