Цепочка выбора jQuery

#jquery #checkbox #css-selectors

#jquery #флажок #css-селекторы

Вопрос:

У нас возникла проблема при попытке объединить селекторы вместе. Мы пытаемся установить все установленные флажки, которые имеют атрибут data-action с hideplan в качестве значения. У меня есть страница, на которой есть два флажка, одна кнопка и этот javascript на ней:

 <script type="text/javascript">
    var hiddenplans = $('input:checkbox[data-action="hideplan":checked');
    $("#hide_btn").click(function() {
        hiddenplans.each(

        function(index) {
            alert('checked'   index);
        });
    }); 
</script>

При установке одного или нескольких флажков не отображаются никакие предупреждения — hiddenplans пуст. Однако, если мы скопируем это $('input:checkbox[data-action="hideplan":checked'); , поместим в консоль firebug и запустим, мы получим результаты, если будет установлен один или несколько флажков. Если я удалю: checked, он будет предупреждать о флажках с данными-action = hideplan.

Мы попробовали несколько разных способов написания селектора (т.Е. $("input[type=checkbox][data-action=hideplan]:checked") и $("input[type=checkbox][data-action=hideplan]").filter(":checked"); и многое другое), и они работают в консоли, но не возвращают оповещения.

Я создал скрипт с полным кодом на случай, если мы пропустили что-то очевидное http://jsfiddle.net/xCnSs/5 /

Ответ №1:

Попробуйте это…

 $('input:checkbox[data-action="hideplan"]:checked')

jsFiddle.

1. Не забудьте использовать тег перед большинством псевдоселекторов, в противном случае подразумевается универсальный селектор * , который потребуется для проверки каждого элемента на странице. :o) Из документации: «Как и в случае с другими селекторами псевдоклассов (теми, которые начинаются с «:»), рекомендуется указывать перед ним имя тега или какой-либо другой селектор; в противном случае подразумевается универсальный селектор («*»)».

Ответ №2:

Вы кэшируете выбранный набор в переменной, поэтому он будет возвращать только те элементы, которые отмечены при загрузке страницы. Переместите этот селектор в свою функцию click, и он будет работать:

 $("#hide_btn").click(function () {
    var hiddenplans = $("input[type=checkbox][data-action=hideplan]:checked");
    hiddenplans.each(function (index) {
        alert('checked'   index);
    });
});

http://jsfiddle.net/xCnSs/6/

Ответ №3:

Вы забыли закрывающую скобку:

 $('input:checkbox[data-action="hideplan"]:checked');

Но помните, что вы также можете фильтровать результаты:

 $('input:checkbox[data-action="hideplan"]').filter(':checked');