Javascript 单击动态生成的复选框列表，选中2个复选框

我有一个复选框列表。一个是名字，另一个是价格。我需要检查一个的价格和相应的名称一得到自动检查

这是我的密码：

<input id="name1" name="name1" value="Option Name 1" type="checkbox">
<input id="price1" name="price1" value="125" type="checkbox">Option Name 1<br>

<input id="name2" name="name2" value="Option Name 2" type="checkbox">
<input id="price2" name="price2" value="150" type="checkbox">Option Name 2<br>

<input id="name3" name="name3" value="Option Name 3" type="checkbox">
<input id="price3" name="price3" value="175" type="checkbox">Option Name 3<br>

选项名称1

选项名称2

选项名称3

---

如何使用javascript实现这一点？如果只有一个集合，我就可以做到，但我不知道如果不为每个集合单独设置函数，我该如何做到这一点。这个复选框列表是用PHP动态创建的，因此根据所选数据库中的项目，会有更多或更少的复选框

给价格输入一个“价格”或类似的类，给名称输入一个“名称”或类似的类

---

然后使用类选择器绑定事件，并使用

next（'.price'）

或

previous（'.name'）

找到相应的复选框。我会向每个输入添加一个类，从那里很容易：

$(document).ready(function() {
    $(".name").change(function(){
        if($(this).is(":checked")){
             $(this).next().attr("checked","checked");   
        }else{
             $(this).next().removeAttr("checked");   
        }
    })
});

---

签出JSIDLE:

可能是这样的吗

为复选框添加class

name

和

price

，以便于检测。以及使用事件删除，因为您正在动态附加

$(document).on('change','.name, .price', function () { //provide a container selector instead of document.
    $(this).next('br').prevAll(':eq(1),:eq(0)').prop('checked', this.checked);
});

如果不想将另一个类添加到标记中，请使用startswith selector，并进行双向切换

$(document).on('change',':checkbox[id^=name],:checkbox[id^=price]', function () { //provide a container selector instead of document.
    $(this).nextUntil('br').andSelf().prev().andSelf().prop('checked', this.checked);
});

---

这只是选择下一个可用的br

不再使用

，而是将它们包装在div中。这样，它们就可以被识别为一个DOM组，您的JS也可以是智能的——不需要一堆事件处理程序

---

此示例使用jQuery:。无论哪种方式，它都会检查整行，我想这正是你想要的。从字面上解释您的问题，它将是

$（'.row'）。在（'change input:nth child（2）'）上，函数（e）{$（e.target）。最近（'.row'）。查找（'input:nth child（1）'）[0]。checked=e.target.checked；}）
@DougSteinberg不客气。如果进程已选中，是否不想检查名称？还是只需要一种方法？用这个更新了第二个示例。我将使用css隐藏名称复选框。这样，用户只会看到一个复选框，但两个复选框的值都会从表单中发送。