Как я могу выбрать первый случай каждого флажка, который имеет уникальное значение для определенного атрибута, используя 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

В настоящее время я использую следующую логику Select All 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");
});

По сути, мне нужно обновить эту логику, чтобы только флажок FIRST для каждого набора флажков, имеющих соответствующее значение uid (например, адреса 101 и 104 иметь совпадающее значение uid -2). Таким образом, в вышеприведенном примере будут выбраны только адресные идентификаторы 100, 101, 102, 103 и 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).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 предоставят вам первый флажок, который соответствует требованиям.

Надеюсь, он вам поможет.

Answer 5

Вот, пожалуйста,

Работа Демо

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