如何按类和属性值过滤掉？

我有几个输入看起来像这样的：

<input type='checkbox' id='1' class='Product' comp='1'> 
<input type='checkbox' id='2' class='Product' comp='1'> 
<input type='checkbox' id='3' class='Product' comp='1'> 
<input type='checkbox' id='4' class='Product' comp='2'> 
<input type='checkbox' id='5' class='Product' comp='2'> 
<input type='checkbox' id='6' class='Product' comp='2'>

如果与产品类的盒子被点击我想它的价值补偿和取消选中其他框具有不同的补偿值。

通常情况下，我会遍历和检查每个补偿值，然后取消在必要时，这样的伪代码：

ThisComp == 1 // comp value of checkbox that was just clicked 
$(".Product").each(function() { 
    var Comp $(this).attr("comp"); 
    if (ThisComp != Comp) { 
     // $(this).attr("checked", false); 
    } 
});

我想知道是否有一种方法在选择使用补偿值过滤，像这样的伪代码：

$(".Product comp=2").attr("checked", false);

这里的目标是取消选中具有比一个有效率的方式点击不同的补偿值的任何框。

来源

2012-02-07 Evik James

'id'值不应以数字开头。 – 2012-02-07 18:58:31

您可能想要将该属性重命名为“data-comp”。数据属性自动绑定到'element.dataset'和jQuery的'.data（）'。 – 2012-02-07 19:06:24

http://api.jquery.com/category/selectors/

$(".Product[comp!='2']").attr("checked", false);

来源

2012-02-07 18:57:58

我认为你应该删除空间，否则它会寻找后代元素。 – interjay 2012-02-07 19:00:01

正确的是.. – 2012-02-07 19:01:39

由于代码位于点击处理程序内，因此我们可以期望'this'值引用其中一个复选框。因此，对'.Product'元素进行全局页面查询并不是一个明智的解决方案。 – 2012-02-07 19:17:29

这应该工作：

$('.Product[comp="2"]').removeAttr("checked");

UPDATE

var comp = $(this).attr("comp"); 
$('.Product[comp="' + comp + '"]').removeAttr("checked");

来源

2012-02-07 19:00:08

这其实很简单。但是，在不使用data- *的情况下创建自定义属性是无效的。改为使用data-comp。另一个小记录，缓存您的选择并过滤它以增加性能。我建议是这样的：

var $productChecks = $('.Product'); 
$productChecks.click(function() { 
    var compValue = $(this).attr('data-comp'); 
    $productChecks 
     // Uncheck boxes that don't have the same comp value 
     // Since checked is a boolean attribute, use prop to set 
     // Quote attribute value in selectors 
     .filter('[data-comp!="' + compValue + '"]').prop('checked', false).end() 
     // If desired, make sure the ones that have the same value are checked 
     .not(this).filter('[data-comp="' + compValue + '"]').prop('checked', true); 
});

http://api.jquery.com/prop

来源

2012-02-07 19:09:42 timmywil

我推荐事件委托（因为我们有共享相同事件处理程序的同一个类的多个元素）。 – 2012-02-07 19:14:08

如果有6个以上的复选框，我认为事件代表团会更合适。它有助于初始执行时间，但比直接绑定的处理程序要慢，但再次，差别可以忽略不计。 – timmywil 2012-02-07 19:21:32

我不明白为什么它会变慢。为什么你这么想？ – 2012-02-07 19:25:21

如何：

$('#boxes').delegate('input:checkbox', 'click', function() { 
    var comp = +$(this).attr('comp'); 
    $(this).siblings().not('[comp="' + comp + '"]').prop('checked', false); 
});

现场演示：http://jsfiddle.net/BMtTy/

或用数据属性：

$('#boxes').delegate('input:checkbox', 'click', function() { 
    var comp = +$(this).data('comp'); 
    $(this).siblings().not('[data-comp="' + comp + '"]').prop('checked', false); 
});

现场演示：http://jsfiddle.net/BMtTy/1/

来源

2012-02-07 19:13:08

如何按类和属性值过滤掉？

回答

相关问题