checkbox,radio的传值和标签

最新推荐文章于 2022-06-03 01:03:38 发布
原创 最新推荐文章于 2022-06-03 01:03:38 发布 · 4.4k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#input

本文详细介绍了HTML表单中checkbox和radio按钮的工作原理。对于checkbox，仅在被选中时才会发送其name和value属性；未选中时不发送任何信息。radio按钮同样遵循这一规则。此外，还介绍了如何使用<label>标签通过其for属性来关联特定的表单控件。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

前段时间一直搞不懂用checkbox,radio时该怎么用，经过实践后才知道。

 

对于checkbox：只有当它处于选中状态的时候才会把它的name和对应的value传过去，如果不选中的话，则在接收端收

不到任何关于此checkbox的信息，相当于在页面的表单里没有放进checkbox类型的<input>

对于radio也是一样；

 

而<label>则可以用它的for属性定位到具有该值的ID上，如：

<label for="male">Male</label><input type="checkbox" name="sex" id="male" />

如果在Male上单击一下，则就相当于在<input type="checkbox" name="sex" id="male" />上单击一样

当然，你可以把for的值设置成任何具有相同ID值的控件上，以取得跟在该控件上单击时达到同样的效果

 

jQuery设置radio、select、checkbox只读属性后，如何在后台得到数据
飞越蓝天的专栏
08-24 8235
1 设置表单的readonly属性 对于radio、select、checkbox来说，readonly属性对这三个标签不起什么作用。2 设置表单的disabled属性 以radio为例说明。 代码示例：$("input[name='radio名']").attr("disabled","disabled")//将input元素设置为disabled $("
在Springboot中使用thymeleaf无法传值的解决过程
MidawLin's Blog
11-05 3171
在学习shiro整合springboot时为了首先测试环境配置是否正确，首先实现了一个使用thymeleaf向html传值的一个maven项目。 首先是导入依赖 <!--thymeleaf--> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter
在js中对HTML的radio标签和checkbox标签的选择项进行输出
weixin_33798152的博客
07-31 329
　　在昨天学习到了一些有关js的函数方面内容后，则对于常见的表格提交进行了练习，在练习过程中，其中难点则是对于hyml中radio标签和checkbox标签所选择项进行输出，在练习过程中各种细节性错误也很多，以下则是个人见解. 　　首先我们进行radio和checkbox的编写 　　　然后则利用onclick属性进行接下来我们要用的函数引用 　　　　其中radio属性则利用for函数以及...
ionic3实战之—Radio传值
若末lan的博客
04-16 2773
ionic3自带的手机样式，，，还好吧，可以改写，我主要想记录一下传值问题。1.父组件获取子组件的按钮选中值；2.本页面获取选中按钮的值。一、父子组件父组件（1）父组件通过数据绑定的方式传值到子组件&lt;fpaylist [data]="data" (parentClick)="onClick($event)"&gt;&lt;/fpaylist&gt; （2）父组件接收子组件传来的radio选中...
涉及Radio传值的写法
小马哥的博客
02-05 1542
博主最近在帮朋友做毕设，需要新增一个功能，功能里面有个radio列表，需要传radio元素的id值到后台，尝试了好多种写法都不行，最后用了下面的写法就好，后台顺利接收到参数，话不多说，直接上图： 要如图红框里面的写法才能取到被选中的选项ID的值，并且传到后台，上面的注释的写法是不正确的； 如图，选中手痛，会将手痛的id传到后台。 ...
获取radio、select、checkbox标签选中的值
dizong1532的博客
02-08 310
1 <input type="radio" id="radio1" name="radio"><label for="radio1">Choice 1</label> 2 <input type="radio" id="radio2" name="radio" checked="checked"><label for="radi...
radio接收并显示后台传值
热门推荐
嘎嘎滴小菜鸟的博客
03-23 1万+
radio从后台向前台传值的原理是： 1.用隐藏域接收后台传过来的radio的参数； 例如：   2.用js获取input  radio里面的参数并传给radio对应的选择框； 例如： （1）注意name一定要一致，不然会导致二个选择框都能选中的想象； 选项1 选项2 正常 无效 （2）给加一个页面加载就运行的js function myfunction()
HTML下拉列表(select)，单选框(radio), 复选框(checkbox)如何向后端传值
m0_67392182的博客
06-03 1554
form是前端往后端传值的一个表单1，下拉列表源码 由于该代码的后端是采用python的Django, 所以html文件里面包含了一些模板语法，但不影响读者阅读2.单选框和复选框源码 三、后台运行结果如下：通过测试可以明白，下拉框和单，复选框是通过标签得name, 和value往后端传值，而input标签的value不会传值，只是会在输入栏中显示，传的的值是自己的输入值。...
html圆点单选,css实现漂亮的checkbox多选框和radio单选按钮
weixin_29443201的博客
05-30 2029
html控件默认样式都不好看，需要css来美化，本文介绍的checkbox多选框和radio单选按钮也不例外，美化工作需要css+图片来完成。漂亮的checkbox多选框和radio单选按钮实际使用中，除了用css和图片来美化样式效果之外，Javascript或JQuery脚本也是少不了的，不然提交表单时传值就有问题。下面几张是本实例中要用到的图片checkbox多选框和radio单选按钮的图片演...
微信小程序 —— 多选checkbox选中之后改变样式
Wu_shuxuan的博客
11-09 1万+
原理：通过checkChange来监听所有checkbox的变化，监听函数通过e.dtail.value得到一个被选中的数组，通过选中数组checkArr[]，来给原先的数据数组items[]的被选中对象的check属性置true，没有被选中的置false，在我们的wxml中，通过判断每个对象的checked属性来给他一个”is_checked”的class。wxml: <checkbox-gro
Radio 单选框渲染文字，传值数字
yuanxinwyc的博客
12-15 1873
1：在data数据里定义数据 data() { return { form: { name:'', capital_profit_type: '', // 资金方利润分配方式 }, payList: [{ value: 1, lable: '账期支付' }, { value: 2, lable: '在线支付' }], } }, 2：Radio标签渲染内容 <el-form ref="f
编辑的时候给select，radio传值选中
qq_16922565的博客
03-06 1320
&lt;select id="selectType"&gt; &lt;option value="1"&gt;1&lt;/option&gt; &lt;option value="2"&gt;2&lt;/option&gt; &lt;option value="3"&gt;3&lt;/option&
radio标签实现：只读+正常传值
MiracleSang的博客
08-06 2993
radio标签实现：只读+正常传值 问题描述 在编程中经常遇到radio标签需要实现只读的情况，但因为radio控件本身就是只读了，所以加readonly等于没效果，所以一般会加disabled实现只读，但这种方式在提交表单时服务器端就不能读取到值了。 解决办法 1.使用hidden传值，较麻烦； 2.使用onClick=‘javascript:return false’ <input name="sex" type="radio" value="1" onClick='javascript:
JS中获取页面单选框radio和复选框checkbox中当前选中的值
WGH100817的博客
09-25 247
单选框：单选框的name值全部相同 页面有一组单选框的元素<td><input type="radio name="radioid">满意</td> <td><input type="radio" name="radioid">基本满意</td> var ...
input标签、radio标签、checkbox标签、select标签
yangshijin1988的专栏
06-06 1389
设置input文本框不能修改 方式一：在标签中加入disabled="disabled" 属性。 方式二：在标签中加入readonly="readonly" 属性。 方式三：在js中引用： $("#form input").each(function (i){ $(this).attr("disabled","disabled"); }); radio标签：
选中多行radio中一行传到后台
weixin_33877885的博客
04-15 268
<input type="radio" name="radio" value="u1"/><input type="text" name="username" value="u1"/><input type="text" name="age" value="10"/><input type="radio" name="radio" v...
复选框的单选功能及传值
qdgengwenfei的专栏
07-28 652
通过遍历得到多组checkbox ，       function checkedThis(obj,cname){       //  alert(obj);        var boxArray = document.getElementsByName(cname);         for(var i=0;i             if(boxArray[i]==obj &
uniapp checkbox单选传值
04-04
在uniapp中，可以通过v-model绑定数据实现单选checkbox的传值。具体实现如下： 1. 在data中定义一个变量，用于存储选中的值： ``` data() { return { selectedValue: '' } } ``` 2. 在模板中使用checkbox，并通过v-model绑定数据： ``` <template> <div> <label><input type="checkbox" value="value1" v-model="selectedValue">选项1</label> <label><input type="checkbox" value="value2" v-model="selectedValue">选项2</label> <label><input type="checkbox" value="value3" v-model="selectedValue">选项3</label> </div> </template> ``` 3. 在需要获取选中值的地方，通过this.selectedValue获取选中的值。 ``` methods: { submit() { console.log(this.selectedValue) } } ``` 这样就可以实现单选checkbox的传值了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值