0

我有一个组合在一起的复选框列表。一个是为了名字，另一个是为了价格。我需要检查一个价格，并自动检查相应的名称。

这是我的代码：

<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 动态创建的，因此根据数据库中所选项目的不同，复选框列表或多或少会有所不同。

4

4 回答 4

2

可能是这样的？

添加类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 选择器，并进行双向切换。

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

于 2013-06-28T20:32:42.977 回答
0

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

然后使用类选择器绑定事件，使用next('.price')or找到对应的复选框previous('.name')

于 2013-06-28T20:29:50.280 回答
0

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

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

结帐 jsfiddle：http: //jsfiddle.net/megarameno/BSYvE/

于 2013-06-28T20:29:52.577 回答
0

不再使用<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; });

于 2013-06-28T20:41:02.133 回答