Как применять различные изменения для каждого элемента управления при выборе по классу?

Question

У меня есть ряд флажков с тем же классом. Я хочу получить все флажки с тем же классом, что и коллекция, и извлечь их идентификатор и проверить статус. Но все выбранные по классам примеры, которые я видел, просто применяют одно изменение ко всем элементам этого класса. Мне нужно получить набор/массив всех элементов флажка с этим классом, чтобы я мог перебирать их.

Хорошо, я пробовал некоторые из предложений и не повезло. Это бросает объект Ожидаемая ошибка в IE8:

var checkboxes = document.querySelectorAll("input[type='checkbox'].chkRoles"); 

И это дает мне пустой массив каждый раз, независимо от того, что проверено.

var mandatoryRoleIDs = []; 

    $('input.chkRoles[type="checkbox"]').each(function (i, checkbox) 
    { 
     if ($(checkbox).attr('checked')) 
      mandatoryRoleIDs.push($(checkbox).attr('id')); 
    }); 

Answer 1

var checkboxes = document.getElementsByClassName('classname'); 

Тогда итерацию над ним, чтобы делать то, что вам нужно.

for(var i = 0; i < checkboxes.length; i++) { 
    var current = checkboxes[i]; 
    // stuff on current 
} 

Использование JQuery не нужно в этом простом случае, и querySelectorAll не полностью поддерживается браузером старой; Vanilla JS - лучший способ сделать это!

Так как вам нужно, чтобы поддержать IE8 (черт Microsoft), вы должны сделать что-то вроде этого:

var inputs = document.getElementsByTagName('input'), 
    className = "classname"; 
for (var i = 0; i < inputs.length; i++) { 
    var current = inputs[i]; 
    if (current.type !== 'checkbox' || current.className.indexOf(className) === -1) continue; 
    //do stuff with current 
} 

См working JSFiddle example этого фрагмента.

Answer 2

Поскольку ваш вопрос помечен JQuery, вот как вы можете это сделать с каждой функции JQuery (в):

$('input.someClass[type="checkbox"]').each(function(i,el){ 
    var $this = $(el), 
     id = $this.attr('id'), 
     checked = $this.attr('checked'); 
    /* do stuff with id and checked */ 
});