有没有人知道这个效果怎么做出来的

Question

1.效果：

2.效果描述：点击保险方案的checkbox勾选选项，右侧的结算信息的保险费用里会出现相应的信息，取消勾选的checkbox，右侧的结算信息的保险费用里的那条保险信息消失。
3.问题
取消勾选的checkbox，怎么才能让消失的信息就是勾选的对应的那条呢？
我用jquery动态生成的右侧的结算信息，让他点击勾选框时在右侧的结算信息里插入一行保险信息代码，动态获取勾选的那条保险的相关信息显示在右侧的插入的代码里。
但是取消勾选框，删除的那条信息并不是我想删的那条？
要怎么做呢？
大家有没有好的想法？
这是途牛网的预定页面上的。http://www.tuniu.com/tours/21...

Answer 1

我觉得可以在动态生成的那条div上设置一个name属性，这个name属性和checkbox的id关联起来，这样，每次点击checkbox就获取id，然后去右边找到具有这个name值的div删掉就好了=.=

Answer 2

大致思路是：根据数据来渲染DOM：

需要的数据：
左侧的保险方案可以用一个数组来维护：schemeList=[{},{}...]；

右侧的结算可以用一个数组来维护：selectedList=[{},{}...]；

需要的方法：
checkbox的点击动作:

function toggleCheck(id){
    //1. 对schemeList、selectedList进行操作；
    //2. 金额计算。。。
    //3. 结算页面的渲染render();
}

结算页面的渲染方法：

function render(){
    //根据selectedList进行dom操作
}

Answer 3

就是一个数组里面都是对象嘛，对象里面加一个判断是否选中的字段，另一边就根据这个字段来判断是否要显示

Answer 4

点击checkbox的时候通过ajax把当前选项的id提交到服务器，再把服务器返回的结果显示到左边

Answer 5

checkbox的id跟右边的购物车列表的id关联，
下订单时全部显示出来，然后通过操作动态控制

Answer 6

使用ajax请求即可

Answer 7

一般电商网站 购物车页面都有这种联动的效果 点击一处多处动起来 这就是一个操作页面元素的问题 然后加入逻辑计算 并不需要与后台交互