62,046
社区成员
发帖
与我相关
我的任务
分享Js动态添加复选框问题
循环出每个镇区，然后在这些镇区前面添加一个复选框，要怎么样才能实现啊？
现在的效果：
需要增加复选框后的效果：
请问大神们怎么样才能添加上去啊？
现在的效果：
需要增加复选框后的效果：
请问大神们怎么样才能添加上去啊？
...全文
请发表友善的回复…
发表回复
无处安放的Bug 2018-11-29
- 打赏
- 举报
js动态添加的checkbox无法选中，通过prop('checked')的值为true，请问大神么，这是个什么情况？
大渣吼吾系渣渣辉 2017-05-25
- 打赏
- 举报
厉害，表述已经很清楚了
以专业开发人员为伍 2017-05-22
- 打赏
- 举报
模板的基本调用方式是这样的，比如说你有一个关于“文案编写信息”的编辑界面，把它的模板叫做 paper_editor，假设实际上一个页面应用上其实有4个文案需要编辑，那么在页面上不同地方可能就有
<div data-bind="template:{name: MyTemplateLoader('paper_editor'), data: paper1}"></div>
........
<div data-bind="template:{name: MyTemplateLoader('paper_editor'), data: paper2}"></div>
........
........
<div data-bind="template:{name: MyTemplateLoader('paper_editor'), data: paper3}"></div>
........
........
<div data-bind="template:{name: MyTemplateLoader('paper_editor'), data: paper4}"></div>以专业开发人员为伍 2017-05-22
- 打赏
- 举报
此外，像“绑定列表1、2、3”这类，适合单独设计为模板，甚至动态加载到页面 html 上。
不是放在一起，而是分层、复用。就好象我上面举例的 template1 实际上设计在其它地方，可以重复在许多地方引用同一个模板设计，模板中可以再嵌套模板，而且 “template:{ name: xxxxx }” 这里的 xxxxxx 其实可以使用一个 KnockoutObservable 属性来首先返回一个通用的模板名字（例如叫做'loading'的模板），然后使用 jQuey.get 加载模板到当前页面，然后再返回真实的模板 id，这样 mvvm 机制下就会看到 knockout 再来加载真实的模板。（当然如果已经加载过一次，你直接就能从 document.body 内部根据 id 找到已经加载的模板，就不需要先来加载 loding 模板了）。
总之，模板分层搭积木，可服用，而且可延迟从服务器上动态拉取。这样再来架构页面，这样再来灵活运用 knockout。
以专业开发人员为伍 2017-05-22
- 打赏
- 举报
切换单选和多选视图的问题，在 knockout 中大致是这样设计模板的
<!-- ko if: 单选 -->
<div data-bind="template:{name:' template1'}"></div>
<!-- /ko -->
<!-- ko ifnot: 单选 -->
<div data-bind="template:{name:' template2'}"></div>
<!-- /ko -->
大渣吼吾系渣渣辉 2017-05-21
- 打赏
- 举报
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
table {
width: 100%;
margin-top: 3px;
}
</style>
</head>
<body>
<table style="border:1px solid #000000">
<tbody>
@*绑定列表1*@
<tr>
<td style="width:100px">驾照类型</td>
<td data-bind="foreach:DataList1">
<label>
<input type="checkbox" data-bind="checked:select,visible:$root.DataList1Multiselect " />
<!-- ko text:title --><!-- /ko-->
</label>
</td>
<td style="width:100px">
<label><input type="checkbox" data-bind="checked:DataList1Multiselect" />多选</label>
</td>
</tr>
</tbody>
</table>
<table style="border:1px solid #000000">
<tbody>
@*绑定列表2*@
<tr>
<td style="width:100px">价格区间</td>
<td data-bind="foreach:DataList2">
<label>
<input type="checkbox" data-bind="checked:select,visible:$root.DataList2Multiselect" />
<!-- ko text:title --><!-- /ko-->
</label>
</td>
<td style="width:100px">
<label><input type="checkbox" data-bind="checked:DataList2Multiselect" />多选</label>
</td>
</tr>
</tbody>
</table>
<table style="border:1px solid #000000">
<tbody>
@*绑定列表3*@
<tr>
<td style="width:100px">驾照类型</td>
<td data-bind="foreach:DataList3">
<label>
<input type="checkbox" data-bind="checked:select,visible:$root.DataList3Multiselect" />
<!-- ko text:title --><!-- /ko-->
</label>
</td>
<td style="width:100px">
<label><input type="checkbox" data-bind="checked:DataList3Multiselect" />多选</label>
</td>
</tr>
</tbody>
</table>
<button data-bind="click:function(){$root.ShowSelectValues()}">显示所选值</button><br />
<label>所选的值是：</label><br />
<div style="width:100%;" data-bind="html:$root.SelectValues"></div>
</body>
</html>
<script src="~/Scripts/knockout-3.4.2.js"></script>
<script>
function Model() {
var model = this;
model.DataList1 = ko.observableArray([]);//定义列表1
model.DataList2 = ko.observableArray([]);//定义列表2
model.DataList3 = ko.observableArray([]);//定义列表3
model.DataList1Multiselect = ko.observable(false);//列表1 是否开启多选开关（默认false）
model.DataList2Multiselect = ko.observable(false);//列表2 是否开启多选开关（默认false）
model.DataList3Multiselect = ko.observable(false);//列表3 是否开启多选开关（默认false）
//加载数据函数
model.LoadData = function () {
//这里你可以从服务端读取数据，然后赋值给具体的列表（这里我们手动添加几条）
//初始化数据列表1的数据源
model.DataList1.push({ title: "全部", id: 11, select: false });//title：名称，select属性表示是否选中的该数据(下同)
model.DataList1.push({ title: "测试12", id: 12, select: false });
model.DataList1.push({ title: "测试13", id: 13, select: false });
model.DataList1.push({ title: "测试14", id: 14, select: false });
//初始化数据列表2的数据源
model.DataList2.push({ title: "全部", id: 21, select: false });//title：名称，select属性表示是否选中的该数据(下同)
model.DataList2.push({ title: "测试22", id: 22, select: false });
model.DataList2.push({ title: "测试23", id: 23, select: false });
model.DataList2.push({ title: "测试24", id: 24, select: false });
//初始化数据列表3的数据源
model.DataList3.push({ title: "全部", id: 31, select: false });//title：名称，select属性表示是否选中的该数据(下同)
model.DataList3.push({ title: "测试32", id: 32, select: false });
model.DataList3.push({ title: "测试33", id: 33, select: false });
model.DataList3.push({ title: "测试34", id: 34, select: false });
}
model.SelectValues = ko.observable("");
model.ShowSelectValues = function () {
var jsonString = "";
for (var i = 0; i < model.DataList1().length; i++) {
var item = model.DataList1()[i];
if (item.select)
jsonString += (item.title + ',')
}
for (var i = 0; i < model.DataList2().length; i++) {
var item = model.DataList2()[i];
if (item.select)
jsonString += (item.title + ',')
} for (var i = 0; i < model.DataList3().length; i++) {
var item = model.DataList3()[i];
if (item.select)
jsonString += (item.title + ',')
}
model.SelectValues(jsonString);
}
}
window.onload = function () {
//实例化模型
var model = new Model();
//加载模型数据
model.LoadData();
//绑定到页面上，main为html元素id
ko.applyBindings(model, document.getElementById("main"));
}
</script>以专业开发人员为伍 2017-05-19
- 打赏
- 举报
随便一行列表，你的界面上，都可以是一个独立的模板（或者在有的框架里叫做组件，或者有的框架分别有模板和组件两种概念）。比如说右下角的两个 checkbox 的那个“驾照类型”，就可以用一个、或者多个单独的 html 文件表示它的模板，动态加载到前端页面上去。
那么用拿一个模板，以及这个模板里边是绑定出两个 CheckBox 还是10个，完全就依赖于视图数据，也就是 ViewModel。因此现在不论你用哪一个前端开发框架（我说的是应用整体的编程开发框架，不是像 Bootstrap 这类 UI 控件框架），都是将 View 与 Model 分离开的，然后使用“胶水”语言绑定在一起。
你说的这个设计问题在前端工程师看来应该是最基本的编程功能，毫无难度。只要能理解分层设计的原则，框架就能帮他处理还所有其它的需要编码的事情，他几乎是声明好了之后这个程序就自动产生出来了。根本不愁写一大堆 javascript 问题（因为也不怎么需要写 javascript 代码）。而没有前端框架知识的人，拿着 javascript 和 jQuery 就直接来开发程序的人，则比较费劲，就好像用 c和汇编语言从“裸层”没有任何企业类库支持下来开发企业应用、而不是用 java 和 .net 来开发企业级系统一样。
以专业开发人员为伍 2017-05-19
- 打赏
- 举报
可能你看不懂我说的具体细节，因为你也没有具体细节，而且最主要地是你和我所使用的程序理念和框架体系不同。所以就看看我说的架构分析看看没有启发就好了。
假设你把单选和多选两个模板混淆起来、纠结起来、“叉在一起”来设计，其实并不省力，反而混乱。分成两个无关的 html 模板结构，反而省力。
以专业开发人员为伍 2017-05-19
- 打赏
- 举报
从 ViewModel 角度来设计，你需要有两个属性。一个是选择的数据，其实是个 string 数组，只不过当界面为单选界面时保证此数组中最多有一个 string 对象而已。另一个是一个boolean 标志，表示是单选界面还是多选界面。
从 View 角度来设计，你确实绑定了 VM 第二个参数，有两个界面模板实例。当单选时加载单选 html 模板，当多选时加载多选 html 模板。（很显然，所有模板在第一次加载时，也还可能动态加载 loading 模板或者 empty 模板，给用户一个比较好的动态体验）
那么两个模板中的 html 就可以自由设计了，不用勉强地硬要把什么“列表、checkbox”给统一起来。两个模板里边的东西完全没必要共用，可以各自设计各自的（不过就是3、4行 html 而已）。模板中的内容它们分别绑定到 vm 的第一个属性上。
xiaojunjor 2017-05-19
- 打赏
- 举报
点击多选绑一个click事件，遍历你要加复选框的元素，然后createElement()创建复选框insertBefore加上去，或者jq的话直接before('<intpu type=“checkbox”>')就行
不过感觉楼上说得对，这个你最好提前页面就有，点击多选显示出来，不点击多选隐藏掉
本人QQ-554433626 2017-05-19
- 打赏
- 举报
一开始就每个加复选框 隐藏显示
屎涂行者 2017-05-19
- 打赏
- 举报
点击多选时出现复选框，然后进行选择
