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

Question

Hard question to understand, I'm sure, so I'll show you what I'm trying to do:

Let's say I have the following checkboxes 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

I am currently using the following Select All jQuery logic:

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

Basically, I need to update this logic so that only the FIRST checkbox of each set of checkboxes that has a matching uid value (for eaxmple, address 101 and 104 have a matching uid value -2) is selected. So, in the above example, only Address Ids 100, 101, 102, 103, AND 106 would be selected, and 104 and 105 would remain unselected. How I can do this in jQuery? I just can't seem to figure out the selector!

Thanks.

Answer 1

I'm not sure if this is the best way of getting the checkboxes, but it works:

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

So then, you could simplify the event handler on #selectAll as:

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

Working example: http://jsfiddle.net/FishBasketGordo/crkA7/

Answer 2

Looks like this'll do the job:

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

Live example: 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') );
    });
});

Here's the fiddle: http://jsfiddle.net/YEbD2/

Answer 4

Here you go

Working Demo

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

You can use:

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

where specific_uid_value is the uid value that you want to filter.

the jQuery filter function will filter the checkboxes with attribute uid = your desider value and the jQUery first function will give you the first checkbox that fulfill the requirements.

Hope it helps you.

Answer 6

This is one way to do it, but I feel like it could be better. After the conditional, loop through the inputs and uncheck any duplicates.

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