前端 单选框，复选框

最新推荐文章于 2024-05-08 02:02:02 发布
最新推荐文章于 2024-05-08 02:02:02 发布
阅读量833 收藏 2
点赞数 1
文章标签： 前端 html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_68194523/article/details/129437573
版权

单选框

 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <h1>单选框</h1>

    <div>你对以下内容满意吗</div>

    <div>

        <input type="radio" name="a" id="a">

    <label for="a">满意</label>

    </div>

    <div>

        <input type="radio" name="a" id="b">

    <label for="b">一般</label>

    </div>

    <div>

        <input type="radio" name="a" id="c">

    <label for="c">较满意</label>

    </div>

    <div>

        <input type="radio" name="a" id="d">

    <label for="d">不满意</label>

    </div>

</body>

</html>

复选框

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <h1>复选框（多选）</h1>

    <div>你的兴趣爱好是</div>

    <div>

        <input type="checkbox" name="a" id="a">

        <label for="a">打篮球</label>

        <input type="checkbox" name="a" id="b">

        <label for="b">踢足球</label>

        <input type="checkbox" name="a" id="c">

        <label for="c">打排球</label>

    </div>

    <div>你擅长的技术是</div>

    <div>

        <input type="checkbox" name="b" id="h">

        <label for="h">html</label>

        <input type="checkbox" name="b" id="j">

        <label for="j">js</label>

        <input type="checkbox" name="b" id="n">

        <label for="n">css</label>

    </div>

</body>

</html>

 

爱看编程的小马
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
复选框 前端代码
weixin_39417324的博客
10-12 316
【代码】复选框 前端代码。
前端 多个筛选框
lycorisradiata_1的专栏
07-07 486
v-for 在外层控制，且不能在最外层 <template> <div class="select-form"> <el-form :inline="true" class="demo-form-inline"> <div class="cov_select" v-for="(item,index) in selectData" :key="index" > <div c
input标签基本使用-单选框、多选框、文件上传
weixin_72431184的博客
05-16 4507
input标签基本使用-单选框、多选框、文件上传
前端编程之路一一form表单标签（详解）(1)
最新发布
2301_82244343的博客
05-08 353
select是显示一个下拉列表(drop down list)出来，option是下拉列表中的项目(item)，而option的文本内容(text content)是下拉列表项目中显示到页面上的值，value是真正需要提交到服务端的值。不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！两者的区别是单选框中的选项用户只能选择一项，而复选框中用户可以任意选择多项，甚至全选。type：只有当type值设置为submit时，按钮才有提交作用。
前端基础之单选框
喜羊羊love红太狼
04-25 6430
.单选按钮实现 切换 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input type="radio...
前端-HTML-基础标签
zk1147756506的博客
02-07 1159
一.网站 网站是网页的集合 网页通常是HTML格式的文件，包括图像，视频，文字，语音.....元素组成，用html标签描述出来在浏览器上显示给用户的 二.HTML HTML指的是超文本标记语言（Hyper Text Markup Language）,它是用来描述网页的一种语言 超文本的含义 1.指可以放置多媒体的内容（超出了文本的限制） 2.指可以从一个文件跳往另一个文件（超级链接文本） 它不是一种编程语言，而是一种标记语言（markup language） 标记语言是一套标记标签（m
前端：下拉选项框及文本框的实现
fuyuo的博客
06-17 8174
下拉选项框的实现以及文本框的实现，以及要实现这2个功能的所需标签的介绍
单选框_复选和单选框
weixin_42352351的博客
01-11 3348
大家好，今天我们来学习掌握复选框和单选框的交互效果。复选框针对的是多选题，每一个选项的选中状态都是各自独立互不影响，即是否勾选第一个选项，对勾选第二个选项的结果没有任何影响；单选框针对的是单选题，在所有的选项中，只能同时有一个选项可以是选中状态，即如果选中第一个选项后，又将第二个选项设为选中，则第一个选项将自动变为未选中状态；功能点：1)原件选中状态设置 2)选...
jQuery单选框和复选框美化代码
11-30
在网页设计中，单选框（Radio Button）和复选框（Checkbox）是常见的用户交互元素，用于收集用户的多选或单选信息。然而，原生的HTML单选框和复选框样式往往较为单一，视觉效果可能不符合现代网页设计的要求。jQuery...
jQuery自定义单选按钮复选框代码
06-24
本资源“jQuery自定义单选按钮复选框代码”专注于改进网页表单元素的样式，特别是单选按钮（radio）和复选框（checkbox），使其更符合现代网页设计的审美需求。 一、jQuery简介 jQuery是由John Resig于2006年创建的...
jQuery自定义单选按钮复选框样式特效
06-10
"jQuery自定义单选按钮复选框样式特效"是一个针对初学者的简单教程，它演示了如何利用jQuery库对网页中的基本表单元素，如单选按钮（radio button）和复选框（checkbox），进行美化和功能增强。下面我们将详细探讨这...
单选框、复选框、下拉框的使用及跨页面传值
08-07
在Android应用开发中，用户界面的设计至关重要，其中单选框（RadioButtons）、复选框（CheckBoxes）和下拉框（Spinner）是常见的交互元素，它们用于收集用户的选择信息或控制用户界面的状态。本教程将深入讲解这三种...
复选框变单选框
03-22
### 复选框变单选框的背景 在Web应用开发中，复选框和单选按钮都是用于收集用户选择的常用表单元素。复选框允许用户进行多项选择，而单选按钮则限制用户只能从一组选项中选择一个。然而，在某些场景下，如需满足...
前端html小技巧（form篇）：复选框、单选按钮的使用
yunduanaoligei的博客
02-16 4425
今天分享下”前端html小技巧（form篇）：复选框、单选按钮的使用“这篇文章，文中根据实例编码详细介绍，或许对大家的编程之路有着一定的参考空间与使用价值，需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xm
QT Creator的单选框和复选框的使用
m0_60631283的博客
10-01 756
QT Creator的单选框和复选框的使用案例-单选和多选项
【前端web入门第二天】02 表单-input标签-单选框-多选框
weixin_62613321的博客
01-28 1353
html5实现表单,使用input标签
如何进行复选框的应用—前端小课堂
yunduanaoligei的博客
11-25 489
今天分享下”如何进行复选框的应用—前端小课堂“这篇文章，文中根据实例编码详细介绍，或许对大家的编程之路有着一定的参考空间与使用价值，需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。 复选框在网页中很是常见，无论是电商网站，还是平台，只有有需要选择的地方就会见到复选的身影。接下来，是我之前写过的两个小demo，都是关于复选框的，希望会给大家带来帮助。 第一个是关于复选框全选反选的操作，当然我在里面还加了一个小功能，就是当选择底下尚品或者其他的东西的复选框全部为选中状态时则全选按钮也变为选中状态；反之亦然。
前端基础知识介绍
weixin_45173160的博客
03-16 954
前端基础知识，html和css的基础知识介绍
前端中复选框三个状态
执笔绘江山的博客
05-23 479
所以实际使用过程中不仅仅有选中和未选两种状态，还有不确定态需要我们注意，在实际运用中也会使用到。
后端传值，前端单选框和复选框如何回显
05-24
后端传值到前端可以通过模板引擎或者接口返回的数据来实现。对于单选框和复选框，可以通过设置它们的`checked`属性来回显。具体实现方法如下： 单选框： ``` <input type="radio" name="gender" value="male" {% if gender == 'male' %}checked{% endif %}> Male <input type="radio" name="gender" value="female" {% if gender == 'female' %}checked{% endif %}> Female ``` 其中`{% if gender == 'male' %}checked{% endif %}`表示如果gender的值为'male'，则该单选框被选中。 复选框： ``` <input type="checkbox" name="hobby" value="reading" {% if 'reading' in hobby %}checked{% endif %}> Reading <input type="checkbox" name="hobby" value="writing" {% if 'writing' in hobby %}checked{% endif %}> Writing <input type="checkbox" name="hobby" value="traveling" {% if 'traveling' in hobby %}checked{% endif %}> Traveling ``` 其中`{% if 'reading' in hobby %}checked{% endif %}`表示如果'hobby'列表中包含'reading'，则该复选框被选中。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值