js动态生成<input>勾选框，可单选可多选

最新推荐文章于 2024-05-26 11:43:41 发布
最新推荐文章于 2024-05-26 11:43:41 发布
阅读量4.2k 收藏 1
点赞数 2
分类专栏： 网站
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/open_curry/article/details/55258095
版权
本文介绍了如何使用JavaScript动态生成HTML中的元素，创建可单选或多选的勾选框。通过示例代码展示了具体实现方法。
摘要由CSDN通过智能技术生成

1、动态生成的位置，html代码：

<body>
    <div class="show" id="show">
 
    </div>
</body>

2、这是ajax()的一部分，从数据库取得所需的数据 
success : function(data, textStatus) {
            $("#loading").hide();
            if(data.code == 20000) {
                var i = 0;
                saveRightidList = data.rightidList;
                for(var j = 0; j < data.rightidList.length; ++j){
                    genShowContent("show", data.rightidList[j], data.descriptionList[j], "right");

                    for(var nb= data.descriptionList[j].length;nb< 15;nb++) {
                        $("#show").append(" ");//每个<input>之间保证不紧挨着
                    }
                    if( j %4 ==3 ) {$("#show").append("<br/>");}//进行换行
最低0.47元/天 解锁文章
open_curry
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
js 关于input多选
yu_run的博客
11-22 1948
<div onchange="fn()"> <label><input width="10" type="checkbox" value="a1" />&nbsp;a1</label><br> <label><input width="10" type="checkbox" value="a2" />&nbsp;a2</label><br> .
JS实现点击按钮添加输入框并输出值
热门推荐
qq_42583562的博客
12-29 2万+
【代码】JS实现点击按钮添加输入框并输出值。
有趣的css - 加减动态多选框
最新发布
设计师工作日常
05-26 834
用 css 实现一个适用树形菜单场景的加减动态多选框。
h5 页面点击添加添加input框
weixin_30312563的博客
04-18 771
h5 页面点击添加添加input框 前段时间有个需求，页面要能点击添加按钮控制input框的个数，当时感觉有点难，就没做，这两个又遇到了，没办法写了个简单的 效果图，加号增加，减号减少 直接上代码， 用来bootstrap的组件 div部分 <div class="container col-md-8" style="margin:100px"> ...
js动态生成多行多列复选框
WuqibuHuan的博客
07-01 1315
本例目标： 获取后台数据集合，将集合的某个字段，比如：姓名，以复选框形式显示在HTML页面 应用场景： 获取数据库的人员姓名，将其显示在页面，供多项选择 效果如下： 一、后台 查询数据库，返回List集合形式给页面 二、HTML 设置一个div，里面动态加载人员姓名 <div id="result" style="background-color:#FFE4B5; width:300px; "> </div> 三、JS （1）dealDa
js动态设置单选输入框(radio)选中状态
I_recluse的博客
07-26 1万+
有时需要在js中动态控制单选输入框的选中状态，这一般有两种方法： 1.通过设置input单选输入框的元素属性“checked”为“checked”，但需要注意的是，要把上一次设置的“checked”属性去掉，不然再次点击同一个元素的时候，选中状态就会错误。 2.通过设置input单选输入框的DOM节点属性“checked”为true或false来实现。 下面通过一个例子来说明两种方法，这个例...
使用<input>实现checkbox
09-25
在这个特定的场景中，我们关注的是`<input type="checkbox">`，用于创建复选框。复选框允许用户在多个选项中选择一个或多个，通常用于提供多选功能。 ### `<input type="checkbox">`基础知识 1. **基本结构**：`...
js实现input密码框提示信息的方法(附html5实现方法)
11-24
本文实例讲述了js实现input密码框提示信息的方法。分享给大家供大家参考，具体如下： 今天我们主管说要在密码框加入个”请输入密码”的提示信息,第一次的时候本来想着用修改input type 属性的方法呢,结果有某些特别...
ui组件之input多选下拉实现方法（带有搜索功能）
09-02
在示例中，`<div>` 结构包含了`<label>`（用于展示提示文本），`<input>`（用户输入和搜索），以及两个嵌套的`<div>`（一个用于动态添加选中项的`<span>`，另一个包含下拉列表`<ul>`）。`<input>` 和 `<ul>` 之间的...
Bootstrap3 多选和单选框(checkbox)
08-31
这里，`<input>`标签的`type="radio"`定义了单选框，`name`属性确保所有单选框属于同一组，`checked`属性表示初始选中的状态。和多选框一样，`disabled`属性可以用于禁用单选框。 **样式和布局** Bootstrap3 提供了...
js实现input框文字动态变换显示效果
10-23
本文将详细介绍如何使用JavaScript实现输入框（input框）内的文字动态变换显示效果，包括随机字符串和中文的切换展示。这种效果可以增加用户交互体验，为网页增添趣味性。 首先，要实现动态变换显示，我们需要一个...
vue 通过按钮动态添加输入框
信徒博客
05-14 1万+
效果图如下 思路： 1、有一个数组counter,是空的 2、在页面上循环遍历这个数组（当然页面上显示的肯定是什么都没有） 3、点击按钮，就会添加元素进去 ...
原生 CSS + JS 实现一个标签输入框
we
05-30 1580
标签输入框，演示效果如下： 标签输入框，要实现的功能： 点击输入框可以输入内容 按回车可以生成标签 按退格键可以删除标签 点击标签上的关闭按钮可以 删除标签 页面比较简单，没必要引入一个完整的框架。就用原生的来实现一下吧。 还可以练习下技术。 一、自适应输入框布局 不管什么组件，布局都是最重要的。这个布局分为标签和输入框两个部分，假设 HTML 如下 <div class="tags-content"> <tag>CSS<a class.
通过JS代码动态生成HTML表格(Table),Input框,Button按钮.并且通过Input框的值进行查询动态生成数据填写在指定的表格里
Sanmu
04-22 2098
通过JS代码动态生成HTML表格(Table),Input框,Button按钮.并且通过Input框的值进行查询动态生成数据填写在指定的表格里 需求分析: 使用JS动态生成Table表格、input框、button按钮 通过input框、button按钮实现查询。 将查询后的结果动态填写在table里面。 实现的效果 通过点击测试按钮生成下面的表格和其他组件 需求实现 1.先在页面定义一个div,用来指定表格生成在哪,并设置一个按钮来触发生成表格函数 <div id="ch_DIV
js新发现结果--input多选提交
weixin_30885111的博客
01-11 359
<!--测评内容--> <form name="form1" method="post"> <p class="title">风险测评</p> <p style="text-indent: 20px;border-bottom:1px dashed #ddd;padding-bottom:15px;">应监管要求，您需要在投...
点input框，弹出一个多选框checkbox，进行选择，每个以逗号隔开
听雨季节
07-29 3726
点input框，弹出一个多选框，进行选择，每个以逗号隔开，如上图所示 1.                                                 datatype="*"                                                > 2.js片段          $('#taskPlanDay').bind('foc
js实现勾选全选框，全部的选框都选中，取消一个选框，全选框就取消的效果
YY的博客
10-18 2825
js实现勾选全选框，全部的选框都选中，取消一个选框，全选框就取消的效果
<table> <form action="updatePerson.do?personId=${sessionScope.updateById.personId}" method="post"> <tr> <td>姓名：</td> <td><input type="text" name="personName" value="${sessionScope.updateById.personName}"></td> </tr> <tr> <td>称呼：</td> <td> <input type="text" name="personNickName" value="${sessionScope.updateById.personNickName}"></td> </tr> <tr> <td>性别：</td> <td><input type="radio" name="personSex" value="${sessionScope.updateById.personSex}">男<input type="radio" name="personSex" value="${sessionScope.updateById.personSex}">女</td> </tr> <tr> <td> 类别：</td> <td><input type="text" name="kindId" value="${sessionScope.updateById.kindId}"></td> </tr> <tr> <td>生日：</td> <td><input type="text" name="personBirthday" value="${sessionScope.updateById.personBirthday}"></td> </tr> <tr> <td>电话：</td> <td><input type="text" name="personTelephone" value="${sessionScope.updateById.personTelephone}"></td> </tr> <tr> <td>QQ：</td> <td> <input type="text" name="personQQ" value="${sessionScope.updateById.personQQ}"></td> </tr> <tr> <td> 邮箱：</td> <td><input type="text" name="personEmail" value="${sessionScope.updateById.personEmail}"></td> </tr> <tr> <td> 地址：</td> <td> <input type="text" name="personAddress" value="${sessionScope.updateById.personAddress}"></td> </tr> <tr> <td> MSN：</td> <td><input type="text" name="personMSN" value="${sessionScope.updateById.personMSN}"></td> </tr> <tr> <td> 简介：</td> <td><textarea cols="10" rows="5" name="personInfo">${sessionScope.updateById.personInfo}</textarea></td> </tr> <tr> <td><input type="submit" name="重填" value="重填"></td> <td><input type="submit" name="提交" value="提交"></td> </tr> </form> </table>为上述代码设计简单分格的ss和js代码
05-28
<td><input type="text" name="personName" value="${sessionScope.updateById.personName}"></td> </tr> <tr> <td>称呼：</td> <td><input type="text" name="personNickName" value="${sessionScope....
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值