如何使用jQuery选择具有特定属性唯一值的每个复选框的第一次出现？

Question

我敢肯定，这是一个很难理解的问题，所以我将向您展示我正在尝试做的事情：

假设我有以下复选框HTML：

<input type="checkbox" id="selectAll" /> Select All
<input type="checkbox" name="addressId" value="100" uid="1" /> Address 100
<input type="checkbox" name="addressId" value="101" uid="2" /> Address 101
<input type="checkbox" name="addressId" value="102" uid="3" /> Address 102
<input type="checkbox" name="addressId" value="103" uid="4" /> Address 103
<input type="checkbox" name="addressId" value="104" uid="2" /> Address 104
<input type="checkbox" name="addressId" value="105" uid="4" /> Address 105
<input type="checkbox" name="addressId" value="106" uid="5" /> Address 106

我目前正在使用以下“全选jQuery”逻辑：

$("#selectAll").change(function() {
    if ($(this).is(":checked"))
        $("input[name='addressId']").attr("checked", "").removeAttr("checked").attr("checked", "checked");
    else
        $("input[name='addressId']").attr("checked", "").removeAttr("checked");
});

基本上，我需要更新此逻辑，以便仅选择具有匹配的uid值（对于eaxmple，地址101和104具有匹配的uid值-2）的每组复选框的FIRST复选框。 因此，在上面的示例中，仅地址ID 100、101、102、103和AND 106将被选中，而104和105将保持未选中状态。 我如何在jQuery中做到这一点？ 我似乎无法弄清楚选择器！

谢谢。

Answer 1

我不确定这是否是获取复选框的最佳方法，但是它可以工作：

var uids = [],
    unique = $('input[name=addressId]').filter(function(index) {
        var uid = $(this).attr('uid');
        if ($.inArray(uid, uids) == -1) {
            uids.push(uid);
            return true;
        } else {
            return false;
        }
    });

因此，您可以将#selectAll上的事件处理程序简化为：

$('#selectAll').change(function() {
    unique.attr('checked', this.checked);
});

工作示例： http : //jsfiddle.net/FishBasketGordo/crkA7/

Answer 2

看起来这可以完成工作：

$("#selectAll").change(function() {
    if ($(this).is(":checked"))
    {
        var checkedUids = [];
        $("input[name='addressId']").each(function(){
           var $this = $(this);
           if(checkedUids.indexOf($this.attr('uid')) == -1)
           {
              $this.attr("checked","checked");
             checkedUids.push(  $this.attr('uid') );
           }
        });
    }  
    else
        $("input[name='addressId']").attr("checked", "").removeAttr("checked");
});

实时示例： http ： //jsfiddle.net/mJvHa/

Answer 3

$("#selectAll").change(function() {

    var $inputs = $("input[name='addressId']"),
        state = this.checked,
        UIDs = [];

    $.each($inputs.toArray().reverse(), function()
    {
        if ( $.inArray($(this).attr('uid'), UIDs) != -1 )
            $(this).prop('checked', state);
        else
            UIDs.push( $(this).attr('uid') );
    });
});

这是小提琴： http : //jsfiddle.net/YEbD2/

Answer 4

干得好

工作演示

$("#selectAll").change(function() {
    if (this.checked){
        $("input[name='addressId']").each(function(i){
           if(i == 0 || $("input[name='addressId']").filter(":lt("+i+")").filter(")[uid="+$(this).attr('uid')+"]").length == 0){
              this.checked = true;
           }
            else{
                this.checked = false;
            } 
        });
    }
    else{
        $("input[name='addressId']").attr("checked", false).removeAttr("checked");
    }
});

Answer 5

您可以使用：

$("#selectAll").change(function() {
if ($(this).is(":checked"))
    $("input[name='addressId']").filter('[uid=' + specific_uid_value + ']').first().attr("checked", "").removeAttr("checked").attr("checked", "checked");
else
    $("input[name='addressId']").filter('[uid=' + specific_uid_value + ']').first()..attr("checked", "").removeAttr("checked");
});

其中specific_uid_value是要过滤的uid值。

jQuery过滤器函数将过滤属性为uid =您的目标值的复选框，而jQUery first函数将为您提供满足要求的第一个复选框。

希望对您有帮助。

Answer 6

这是做到这一点的一种方法，但我认为它可能会更好。 有条件后，遍历输入并取消选中任何重复项。

$("#selectAll").change(function() {
    if ($(this).is(":checked"))
        $("input[name='addressId']").attr("checked", "").removeAttr("checked").attr("checked", "checked");
    else
        $("input[name='addressId']").attr("checked", "").removeAttr("checked");

    var uids = new Array();

    $("input[name='addressId']").each(function(){
        if (jQuery.inArray($(this).attr('uid'), uids))
            $(this).removeAttr("checked");
        else
            uids($(this).attr('uid'));
    });
});