Question

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

这是我的代码：

<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>

我怎样才能用javascript做到这一点？如果只有一套，我可以做到，但我不知道如果不为每一个制作单独的功能我会怎么做。这个复选框列表是使用PHP动态创建的，因此根据所选数据库中的项目，将会有更多或更少的复选框。

Answer 1

可能是这样的？

为复选框添加课程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);
});

<强> Fiddle

如果您不想在标记中添加另一个类，则使用startswith选择器，并进行双向切换。

$(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);
});

<强> Fiddle

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

Answer 2

给价格输入一类“价格”或类似的东西，并给名称输入一类“名称”或类似的东西。

然后使用类选择器绑定事件，并使用next('.price')或previous('.name')

找到相应的复选框

Answer 3

我会为每个输入添加一个类，从那里很容易：

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

checkout jsfiddle：http://jsfiddle.net/megarameno/BSYvE/

Answer 4

不要再使用<br>，而是将它们包装在div中。这样他们就可以被认为是一个DOM组，你的JS可以是智能的 - 不需要一堆事件处理程序！

此示例使用jQuery：http://jsfiddle.net/Nu8w9/2/。它以任何一种方式检查整行，我认为这就是你想要的。从字面上解释您的问题，它只是$('.row').on('change input:nth-child(2)', function (e) { $(e.target).closest('.row').find('input:nth-child(1)')[0].checked = e.target.checked; });

只需单击动态制作的复选框列表，即可选中2个复选框

4 个答案: