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
    评论
专栏目录
点input框，弹出一个多选框checkbox，进行选择，每个以逗号隔开
听雨季节
07-29 3737
点input框，弹出一个多选框，进行选择，每个以逗号隔开，如上图所示 1.                                                 datatype="*"                                                > 2.js片段          $('#taskPlanDay').bind('foc
js 关于input多选
yu_run的博客
11-22 1953
<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> .
有趣的css - 加减动态多选框
最新发布
设计师工作日常
05-26 851
用 css 实现一个适用树形菜单场景的加减动态多选框。
js 动态添加选项
m0_51402016的博客
11-07 296
首先我们应该了解相关知识点 Select 对象 Select 对象代表 HTML 表单中的一个下拉列表。 在 HTML 表单中，<select> 标签每出现一次，一个 Select 对象就会被创建。 您可通过遍历表单的 elements[] 数组来访问某个 Select 对象，或者使用 document.getElementById()。 <!doctype html> <html> <head> <meta cha..
js控制input type=checkbox 的勾选
weixin_30779691的博客
07-03 1550
<scripttype="text/javascript"> $(function(){ //双击表格弹出窗口 //为jQuery类添加类方法，可以理解为添加静态方法 $.extend({ 'getInfo':function(id){ ...
js新发现结果--input多选提交
weixin_30885111的博客
01-11 362
<!--测评内容--> <form name="form1" method="post"> <p class="title">风险测评</p> <p style="text-indent: 20px;border-bottom:1px dashed #ddd;padding-bottom:15px;">应监管要求，您需要在投...
jQuery省市自治区下拉框单选多选特效代码
03-20
5. **多选机制**：如果支持多选，可能引入了`<input type="checkbox">`元素，允许用户勾选多个选项，并且有相应的逻辑处理多选后的数据。 6. **UI美化**：可能应用了jQuery UI或者其他CSS框架来提升界面美观度和...
HTML中Form表单的使用汇总
m0_67846661的博客
05-19 1203
表单元素：不同类型的 input 元素， 复选框，单选框， 提交按钮 。 其中 input 元素有不同形态即type属性：text文本，radio单选，submit提交。value是值，submit表单处理程序[form-handler]提交表单的按钮：action指定表单处理程序。 <form action="1.jsp" name="messages" method="GET" target="self"> <input type="text" name="usern...
dtree实现的树支持多选
09-02
4. **节点渲染**：DTree的每个节点通常由HTML元素（如`<li>`和`<span>`）组成，其中包含一个复选框元素（`<input type="checkbox">`）用于表示可选状态。通过CSS定义样式，可以定制节点的外观。 5. **事件处理**：...
实现bootstrap表格的选择框（checkbox）的全选和单选功能
weixin_30641465的博客
06-14 755
实现的方法是从网上论坛看到的，然后根据自己情况写来用的。table里面的checkbox选择框是在html里面就写好了，不是后期用js代码插入进去的。效果预览图 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta...
Radio 单选JS动态添加的选项onchange事件无效的解决方法
11-27
//记一个问题（已经解决2016.5.5） //在公司项目中遇见一个添加单选项的需求，采用ajax一步请求。为节约资源添加后不刷新网页，js动态改变页面 //当选择到动态添加的单选项，执行绑定事件 radio 单选JS动态添加的选项,onchange事件无效。使用delegate（）函数可以解决该问题！！！ delegate(): delegate() 方法为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。 使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。 语法 $(selector).deleg
html中redio加入音乐,js函数动态向fieledset中添加radio(单选框)的问题。
weixin_39722965的博客
06-03 167
js函数动态向fieledset中添加radio(单选框)，以下称这个函数是Foo()。第一次执行foo的时候，生成radio的数量不对，调试的时候循环执行了3次，而只生成了一个radio。下一次执行的时候就可以正常出现3个了。使用jquery mobile框架。附源代码：function generateCheckbox (){var usercount = parseInt(localStor...
单选框动态选中
weixin_46649054的博客
09-22 323
1表单中添加单选框,checked为默认选中状态 <label class="col-sm-3 control-label">角色类型</label>&nbsp; <input type="radio" id="provinceRole" value="provinceRole" name="roleType" > <label for="provinceRole">市局角色</label>&nbsp;&nbsp; <
通过JS代码动态生成HTML表格(Table),Input框,Button按钮.并且通过Input框的值进行查询动态生成数据填写在指定的表格里
Sanmu
04-22 2135
通过JS代码动态生成HTML表格(Table),Input框,Button按钮.并且通过Input框的值进行查询动态生成数据填写在指定的表格里 需求分析: 使用JS动态生成Table表格、input框、button按钮 通过input框、button按钮实现查询。 将查询后的结果动态填写在table里面。 实现的效果 通过点击测试按钮生成下面的表格和其他组件 需求实现 1.先在页面定义一个div,用来指定表格生成在哪,并设置一个按钮来触发生成表格函数 <div id="ch_DIV
js 操作单选，多选, input 空值检测
iteye_4972的博客
01-10 197
&lt;script type="text/javascript"&gt; function getCateVal(){ var cate=""; var length=document.getElementsByName("cateId").length; for(i=0;i&lt;length;i++){ if(document.getElementsByName("cateI...
原生JS多选选择框，动态渲染数据添加选择框，label标题联动
ating_ing的博客
12-01 984
原生JS多选选择框，动态渲染数据添加选择框，label标题联动
用原生JS做input全选
dongyang0311
06-23 5417
思路：用document.getElementsByTagName方法选中所有的input，然后循环每一个input，如果其type＝checkbox，则让该checked=check。同理，全不选也是让该checked=flase 。输入数字，获取数字的值，拼接成字符串，该字符串为input的id，然后通过document.getElementById的方法，让其checked=true。<!DO
JavaScript中通过点击单选框动态显示和隐藏组件
北辰
05-29 1949
<body> <table> <tr> <td class="tt" title="项目类别"> 项目类别</td> <td> <input type="radio" value="1" name="demo1">政府 <inp...
g) 在页面设置两个<input>元素 h) 给第一个<input>密码框设置禁止粘贴、右键、复制、剪切属性。（通过语句return false） i) 给第二个<input>密码框设置onpaste事件，在进行粘贴的时候给出提示。（通过alert弹出提示，并返回return false）
05-24
以下是实现代码： ```html <input type="password" id="password1" onpaste="return false" oncopy="return false" oncut="return false" oncontextmenu="return false"> <input type="password" id="password2" onpaste="alert('禁止粘贴！'); return false;"> ``` 第一个密码框禁止了粘贴、右键、复制、剪切属性，第二个密码框设置了onpaste事件，在进行粘贴的时候会弹出提示。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值