Question

我正在使用jQuery 1.4.3

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

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

如果单击带有Product类的框，我想获取其comp值并取消选中具有不同comp值的其他框。

通常情况下，我会遍历并检查每个comp值，然后在必要时取消选中，就像这个伪代码一样：

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

我想知道是否有一种方法可以使用选择器中的comp值进行过滤，例如这个伪代码：

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

此处的目标是取消选中具有与以有效方式单击的值不同的comp值的任何框。

Answer 1

这个怎么样：

$( '#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/

Answer 2

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

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

Answer 3

这应该有效：

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

<强>更新

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

Answer 4

实际上很容易。但是，在不使用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

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

4 个答案: