开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

Checkbox应该从数组填充文本框，但不是每次都有效

。

Checkbox是一种常见的用户界面元素，用于允许用户在多个选项中进行选择。当用户选择一个或多个Checkbox时，可以通过将选中的值存储在数组中来进行处理。

在前端开发中，可以使用JavaScript来实现Checkbox从数组填充文本框的功能。具体步骤如下：

创建一个包含Checkbox和文本框的HTML表单，为每个Checkbox设置一个唯一的标识符（ID）。
使用JavaScript获取选中的Checkbox的值，并将其存储在一个数组中。
将数组中的值填充到文本框中，可以使用JavaScript的innerHTML或value属性来实现。

以下是一个示例代码：

<!DOCTYPE html>
<html>
<head>
  <title>Checkbox填充文本框示例</title>
  <script>
    function fillTextBox() {
      var checkboxes = document.getElementsByName('option');
      var selectedValues = [];

      for (var i = 0; i < checkboxes.length; i++) {
        if (checkboxes[i].checked) {
          selectedValues.push(checkboxes[i].value);
        }
      }

      document.getElementById('textbox').value = selectedValues.join(', ');
    }
  </script>
</head>
<body>
  <h3>选择你喜欢的水果：</h3>
  <form>
    <input type="checkbox" name="option" value="苹果">苹果<br>
    <input type="checkbox" name="option" value="香蕉">香蕉<br>
    <input type="checkbox" name="option" value="橙子">橙子<br>
    <input type="checkbox" name="option" value="葡萄">葡萄<br>
    <br>
    <input type="button" value="填充文本框" onclick="fillTextBox()">
    <br><br>
    <input type="text" id="textbox" readonly>
  </form>
</body>
</html>

在上述示例中，用户可以选择喜欢的水果，点击"填充文本框"按钮后，选中的水果将会以逗号分隔的形式填充到文本框中。

Checkbox从数组填充文本框的应用场景包括但不限于：

在表单中选择多个选项后，将选中的值展示给用户。
在筛选功能中，根据选中的选项动态更新展示的结果。
在配置页面中，根据用户选择的选项生成配置文件或参数。

腾讯云提供了丰富的云计算产品，其中与前端开发、后端开发、数据库、服务器运维等相关的产品包括但不限于：

云服务器（CVM）：提供弹性计算能力，支持各类应用的部署和运行。产品介绍
云数据库MySQL版（CDB）：提供稳定可靠的MySQL数据库服务。产品介绍
云存储（COS）：提供安全可靠的对象存储服务，适用于存储和处理各类非结构化数据。产品介绍

以上是对Checkbox从数组填充文本框的完善且全面的答案，希望能对您有所帮助。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

下拉菜单11+原生js获取select下拉框的selected的option项

想必大家在开发过程中也遇到类似问题，如果直接将js获取的数组传给后台，后台是无法区分数组的，因为js数组如果是二维的就是这样的：1,张三,23,2,李四,26

04

HTML表单

创建一个表单 HTML中表单的创建使用<form>标签（双标签） <form method="post" action="index.html"></form> method="post" 指的是表单提交方式，常用值 get | post get：速度较快，但不安全。传输的文本较少；提交的内容会在提交表单之后显示在浏览器的地址栏；不适合密码之类的传输； post：速度慢，但是安全。与get相反。适合用于注册表单、登录表单之类的传输。 action="index.html"指的是表单提交成功后要跳转的页面。

02

从后端到前端之Vue（六）表单组件 HTML5原生的表单和表单元素Vue组件的基础知识表单元素组件辅助工具开源

要想做好表单组件，必须先知道HTML5里面的表单和表单元素都有哪些属性，以及属性的效果和作用，否则的话可能折腾半天才发现，原来HTML5已经自带了这个功能！　　比如要实现这样一个功能：文本框只能输入数字，然后要加上两个按钮，按一个数值+1，按另一个数值-1。以前要写js代码实现，现在只需要把type改成number就可以了。而且可以对输入的文字做拦截，非数字根本输入不进去，这样就不用我们自己再去写代码实现了。所以磨刀不误砍柴工，我们先来整理一下，表单和表单属性都有哪些属性。

01

HTML（表单）

get：速度较快，但不安全。传输的文本较少；提交的内容会在提交表单之后显示在浏览器的地址栏；不适合密码之类的传输；

01

从零开始学 Web 之 DOM（一）DOM的概念，对标签操作

我们把 html 文件看成一个文档，因为万物皆对象，所以这个文档也是一个对象。这个文档中所有的标签都可以看成一个对象，比如 div 标签，p 标签等。

02

4. Vue基本指令

我们知道, v-bind指令可以简写为:, 同样v-on也可以简写, 简写为@, 如上写法可以简写如下:

01

AWT常用组件

推荐一个网站给想要了解或者学习人工智能知识的读者，这个网站里内容讲解通俗易懂且风趣幽默，对我帮助很大。我想与大家分享这个宝藏网站，请点击下方链接查看。 https://www.captainbed.cn/f1

01

Android实现自动登录和记住密码

记住密码和自动登录是很多手机软件都有的一个功能。可以用 SharedPreferences类来轻松实现。 SharedPreferences是安卓平台的一个轻量级类。采用 SharedPreferences进行数据存储是很方便的。

03

jquery操作select(取值，设置选中）

最近工作中总出现select 和 option问题，整理一下，内容大部分源于网络资料

03

jquery操作select（取值，设置选中）

本文由小马哥创作，采用知识共享署名4.0 国际许可协议进行许可本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名

03

PHP Web表单生成器案例分析

在项目的实际开发中，经常需要设计各种各样表单。直接编写HTML表单虽然简单，但修改、维护相对麻烦。因此，可以利用PHP实现一个Web表单生成器，使其可以根据具体的需求定制不同功能的表单。具体实现需求如下：

01

从零开始学 Web 之 HTML（三）表单

table>tr3>td5 + tab键

03

Android系列之实现自动登录和记住密码

记住密码和自动登录是很多手机软件都有的一个功能。可以用 SharedPreferences类来轻松实现。 SharedPreferences是安卓平台的一个轻量级类。采用 SharedPreferences进行数据存储是很方便的。

03

Matlab系列之GUI设计基础

打开GUI可以在Matlab命令窗口输入：guide，就可以打开GUIDE的界面，也可以从主页窗口新建菜单中找到GUIDE，同时发现，还有个App Designer的选项，这个是R2016A版本开始推出的一个GUIDE的替代品，有新的组件，也更容易上手，不过只支持有限的2D图形，所以相对GUIDE还是有些不足，但是学了GUIDE再去操作App Designer显然是更轻松的一件事。

01

【Java AWT 图形界面编程】AWT 常用 Component 组件 ( Frame | Label | Checkbox | List | Choice | TextField )

文章目录一、AWT 常用组件二、AWT 常用组件示例一、AWT 常用组件 ---- AWT 常用组件 : Frame : 窗口组件 ; Label : 标签组件 , 可现显示文本内容 ; TextArea : 多行文本框组件 ; TextField : 单行文本框 ; Button : 按钮组件 ; Canvas : 画布组件 , 用于绘图的组件 ; Checkbox : 复选框组件 ; CheckboxGroup : 单选框组件 , 将多个复选框组合 , 变成单选选项 , 每个组合中只有一个

01

WPJAM 配置器字段使用说明

为了满足各种复杂的情况，WPJAM 配置器的字段是使用 WordPress 的 shortcode 方式设置的，比如你要输入一个简单的 input 文本框，在设置 key 之后，可以使用下面的 shortcode 方式输入：

03

哔哩哔哩注册--表单练习

哔哩哔哩注册–表单练习 HTML代码可能代码有些不足或者用词不当等希望大家能够见谅这是一次bilibili的注册表单练习里面都有详细注释当然一个网页有许多种这只是其中一种是为了相互交流希望大家喜欢最后的效果是这样子的 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sca

02

在 Vue 中创建自定义输入

基于组件的库或框架（如 Vue ）可以创建可重用组件，它能在各自应用程序中相互传递数据，这些框架能确保这些数据是一致的，并且（希望）简化了它们的使用方式。

02

「jQuery」基础 - 02

请注意，本文编写于 2073 天前，最后修改于 173 天前，其中某些信息可能已经过时。

02

jQuery 元素操作

jQuery 元素操作主要讲的是用jQuery方法，操作标签的遍历、创建、添加、删除等操作。

05

【JavaWeb】77：仔细看一哈这张图片

表单的作用是将数据提交给服务器，至于具体是如何提交的，暂时还不清楚，后续会学习到。

02

【IFE】Day 2 – 百度前端技术学院基础学院学习笔记（二)

这是在百度前端技术学院学习的第二天共六十六天课程目标通过简单的实践，更加清楚地了解HTML是什么，HTML5是什么。学习基本的HTML标签，理解HTML语义化概念 //TODO 在CodePen完成一份简单的个人简历 ✔ 将这份简历同步到个人网站上 ✔ 简历地址 ✔ Q & A Q : HTML是什么，HTML5是什么 A : HTML是超文本标记语言 HyperText Mark-up Language,HTML5是超文本标记语言（HTML）的第五次重大修改，在2014年推出

04

Jquery 常见案例

版权声明：本文为博主原创文章，未经博主允许不得转载。

01

Bootstrap【第三章】全局CSS之表单&按钮&图片&辅助类&响应式工具)

class=”form-control”：可以给<input>、<textarea>、<select>元素设置宽度为100%

02

前端|如何制作调查问卷

随之时代的进步，电子文档逐渐代替了纸质文档。电子文档不仅方便提交反馈而且便于存放。现在很多的公司、学校都会做许多调查（市场调查，学习调查等），为了便于收集，大多数都采用网页调查问卷。那么如何通过网页制作一张调查问卷呢？

03

Windows 8.1 应用再出发 - 几种常用控件

本篇为大家简单介绍Windows 商店应用中控件的用法，为方便讲解，我们在文本控件和按钮控件这两类中分别挑选有代表性的控件进行详细说明。 1. 文本控件（1） TextBlock TextBlock是最常用的文本显示控件，重点关注以下属性： CharacterSpacing 字符之前的统一间距，间距 = 字体大小 / 1000。默认为0，正值增进跟踪和放宽字符间距。负值减少跟踪和收紧字符调间距。 IsColorFontEnabled 布尔值，确定颜色标志符号是否以彩色显示。如果颜色标志符号以彩

04

【JavaEE初阶】HTML

前端代码的运行环境是浏览器，浏览器就像Java中的JVM一样，浏览器可以解析html，css，js等代码中的内容，根据代码去后构造前端页面。

01

计算机高职专业VB知识要点002，案例涉及控件：复选框combobox、列表框listbox、框架组frame、单选按钮、多选框

3.combobox复选框添加一项，使用additem,这个函数的第一个参数表示添加什么文字，第二个参数表示添加到第几项，注意第二个参数从0开始表示

01

jquery操作select(取值，设置选中）

jquery操作select(取值，设置选中） 1. $("#select_id").change(function(){//code...}); //为Select添加事件，当选择其中一项时触发 2. var checkText=$("#select_id").find("option:selected").text(); //获取Select选择的 3. var checkValue=$("#select_id").val(); //获取Select选择的Value 4. var check

02

17.Flutter学习之路常用表单TextField、CheckBox等组件

TextField常见属性：属性描述 maxLines 将文本框改为多行文本框，默认是单行 onChanged 文本框改变的时候触发的时间 decoration hintText类似于EditText中hint属性。border 边框线，配合OutlineInputBorder使用、labelText:label的名称、labelStyle，配置label使用 obscureText j将文本框改为密码框 controller controller结合TextEditingController ()可以

02

4.vue 的双向绑定的原理是什么?_监听门事件

前面的指令和 { { }} 都是单向绑定，当用户主动在文本框中输入内容后，如果使用 :value=”str” 方式绑定，用户输入的内容是无法自动回到程序中的变量中保存的。这是因为单向绑定只能将程序中的变量值，自动同步到页面上显示，不能自动将界面中的用户主动做的修改，自动同步回程序中变量里保存。

07

ExtJS中xtype一览

基本组件： xtype Class 描述 button Ext.Button 按钮 splitbutton Ext.SplitButton 带下拉菜单的按钮 cycle Ext.CycleButton 带下拉选项菜单的按钮 buttongroup Ext.ButtonGroup 编组按钮(Since 3.0) slider Ext.Slider 滑动条 progress Ext.ProgressBar 进度条 statusbar Ext.StatusBar 状态条，2.

05

标签之美十——用户交互元素原

任何一个网页都会提供用户交互的功能，包括账号密码的提交，留言板等用户信息的的获取。

03

6.HTML输入表单标签元素介绍

描述: 表单是一个包含表单元素的区域，表单元素是允许用户在表单中输入内容,其包含文本框、文本域(textarea)、按钮、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等元素都要放在form标签里面或者进行form的id值的调用，否则提交的数据到不了后端。

01

Flutter中的常见表单组件

在Flutter中，常见的表单组件有TextField单行文本框、TextField多行文本框、CheckBox、Radio、Switch、CheckBoxListTile、RadioListTile、SwitchListTile、Slide等。

02

JavaScript 学习-45.jQuery 表单选择器

前言 jQuery 表单选择器，专门操作表单内容表单选择器表单选择器总结表单项示例说明输入框 $(":input") 查找所有input元素，包含input、textarea、select、button 文本框 $(":text") 查找所有文本框type=”text” 密码框 $(":password") 查找所有密码框type=”password” 单选按钮 $(":radio) 查找所有单选按钮复选框 $(":checkbox) 查找所有复选框图片 $(":image") 查找所有图像

03

7-2.表单-HTML基础

<input type="radio" name="组名" value="取值" />

02

html常用标签

title也是有助于SEO搜索引擎优化的 HTML不是依靠缩进来表示嵌套的，就是看标签的包裹关系。 HTML中所有的文字之间，如果有空格、换行、tab都将被折叠为一个空格显示。

02

如何将json数据通过vuex渲染到页面上

如何将json数据通过vuex渲染到页面上在store中导入axios import axios from 'axios' 复制代码 actions中执行异步操作，来将json数据拿到store中 actions: { getList(context) { axios.get('./list.json').then(({ data }) => { context.commit('initList', data) }) } }, 复制代码通过m

01

React入门五：事件处理

步骤： 1.在state中添加一个状态，作为表单元素的value的值（控制表单元素值的由来） 2.给表单元素绑定change事件，将表单元素的值设置为state的值（控制表单元素值的变化）

03

Android界面组件基本用法

文本框（TextView）不允许用户编辑文本内容，而编辑框（EditText）允许用户编辑文本内容

02

表单

一.表单　　表单就是一个将用户信息组织起来的容器：　　　　<将需要用户填写的内容放置在表单容器中，当用户单击"提交"按钮的时候，表单会将数据统一发送给服务器> 　　1.表单的内容: 　　　　1）创建表单后，就可以在表单中放置控件以接受用户的输入　　　　2）这些控件通常放在<form></form>标签之间，也可以在表单之外用来创建用户界面　　　　3）不同的表单控件有不同的用途　　 2.表单标签及表单属性　　　　表单的创建：<from>...</from>该标签用于在网页中

09

前端设计vue+layui表单设计3.0

之前表单设计基于layui，用的是h5，后面发现不是很理想，加载过程中有一些不尽人意，因此思来想去准备从新设计。

01

Vue表单输入绑定

表单控件的数据绑定就是用v-model指令实现的，它会根据控件类型自动选取正确的方法更新元素。由于表单控件有不同的类型，如文本输入框、复选框、单选按钮、选择框等，v-model指令在不同的表单控件上应用时也会有所差异。

07

第5章通过HTML5表单与用户交互

HTML5＋CSS3＋JavaScript Web 前端开发案例教程（慕课版），微信读书中找到的学习Web前端书籍，第5章开始啦，耶(＾－＾)V

06

HTML5+CSS3+JavaScript从入门到精通-17

HTML5+CSS3+JavaScript从入门到精通 17-01 用户登录界面！ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>用户登录界面！</title> <script type="text/javascript"> function alert_info() { //win

02

JavaScript 中防抖和节流的应用

你可能会遇到这种的情况，一个站点使用自动填充的文本框，内容的拖拽，效果的滚动。那么，你遇到防抖和截流的概率还是很高的。为了使得这些操作，比如自动填充能够顺畅工作，你需要引入防抖和截流功能。

03

HTML入门

概述 HTML 教程 | 菜鸟教程 (runoob.com) 骨架标签 HTML常用标签 HTML常用标签可分为一下几类：排版标签、图片标签、超链接标签、表格标签、列表标签、表单标签标题标签标题标签一共有6个，h1~h6, h1是─级标题，最大;h6是六级标题，最小 align align是标题的重要属性，能够决定标题中文字的显示位置

标题标签一共有6个

align属性可以设置文本对齐方式

align有三个可选值：left、center、right<
04

HTML 表单 (form) 的作用解释

参考网址：《HTML中form表单作用解释》表单在网页中主要负责的是数据采集功能，一个表单基本由三部分组成：表单标签：这里面包含了处理表单数据所用 CGI （Common Ga

07

[自定义服务器控件] 第二步：下拉列表框。

前面发了一个文本框的，这回发一个下拉列表框。一般在写自定义控件之前都要考虑一下原来的控件（系统代的）有什么优缺点，有哪些功能是我想要的，但是自带的控件没有提供，或者提供的不是太理想。那么对于下拉列表框我个人感觉有几个地方用着不是太方便。 1、绑定数据库。当下拉列表框里的数据需要从数据库里提取的时候，就需要设置DataValueField 和 DataTextField 的属性，每次用的时候都要设置一下，这个比较烦。（不好意思，我比较懒）我的方法是在自定义控件的OnInit 时间里面

06

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭