Primefaces: пытается выбрать все флажки, используя jquery и selectBooleanCheckbox

Question

Я пытаюсь установить флажок «Выбрать все», используя простой компонент p: selectBooleanCheckbox и jquery.

Вот мой код:

<p:selectBooleanCheckbox id="selectAll" onchange="selectAll(this);" itemLabel="select all"/><br/><br/>
<p:selectBooleanCheckbox id="test1" itemLabel="test1"/><br/>
<p:selectBooleanCheckbox id="test2" itemLabel="test2"/><br/>
<p:selectBooleanCheckbox id="test3" itemLabel="test3"/><br/>
<p:selectBooleanCheckbox id="test4" itemLabel="test4"/><br/>
<input type="checkbox" id="test5">test5</input><br/>
<input type="checkbox" id="test6">test6</input><br/>
<input type="checkbox" id="test7">test7</input><br/>

И функция JavaScript selectAll:

function selectAll(checkAll) {
    var checked = checkAll.checked;      
    $(':checkbox[id*="test"]').attr('checked', checked);
}

Когда я выбираю флажок selectAll, проверяются только флажки 5,6 и 7. Используя WebDeveloper, я мог проверить сгенерированный код, и кажется, что другие флажки также отмечены (флажок = "флажок"), хотя они не отображаются проверены.

Я тоже пробовал:

function selectAll(checkAll) {
    var checked = checkAll.checked;                  
    $(':checkbox[id*="test"]').click();
}

И это не сработало.

Я только добавил эти флажки HTML, чтобы проверить мой jquery. Просто чтобы убедиться, что это работает.

Я использую Primefaces 3.0 и Tomcat 6.0.20.

Кто-нибудь может мне помочь? Заранее спасибо.

Answer 1

Проблема заключалась в использовании классов стилей, которые использует Primefaces, как только проверялся сам флажок.

Чтобы решить эту проблему, мне пришлось изменить функцию javascript. Теперь это выглядит так:

function selectAll(checkAll) {
    var checked = checkAll.checked; 

    //to change the checked attribute                
    $(':checkbox[id*="test"]').attr('checked', checked);

    if (checked) {
        $('div[id*="test"] > div').each(function() {
            $(this).addClass('ui-state-active');
            $(this).children('span').addClass('ui-icon ui-icon-check');
        });
    } else {
        $('div[id*="test"] > div').each(function() {
            $(this).removeClass('ui-state-active');
            $(this).children('span').removeClass('ui-icon ui-icon-check');
        });
    }
}

Все дело в отображении выбора флажка. И в этом случае, когда я использовал простые лица, все было связано со стилями.

Спасибо за тех, кто пытался мне помочь.

Answer 2

Сабрина! Большое спасибо за указание мне в правильном направлении. Суть проблемы, как вы указали, заключается в том, что флажки PF не разрешаются в флажки JSF - их состояние определяется их стилями, а не состоянием, которое вы можете запросить любым методом флажка, например value() или checked(). Это немного вводит в заблуждение, но приводит к более гибким флажкам. Так умно с твоей стороны использовать .children() и .add/removeClass() методы, о которых я бы даже не подумал.

Для PF 6.1 мне пришлось немного изменить ваш код. Разница между проверенным и непроверенным состоянием заключалась в наличии / отсутствии стиля ui-state-active на содержащем поле <div> и ui-icon-checked и ui-icon-blank на содержащемся <span>.

 function selectAll(checkAll) {
    var checked = checkAll.checked; 
    //to change the checked attribute                
    $(':checkbox[id*="cloneCheckBox"]').attr('checked', checked);
    if (checked) {
        $('div[id*="cloneCheckBox"] > div').each(function() {
            $(this).addClass('ui-state-active');
            $(this).children('span').addClass('ui-icon-check');
            $(this).children('span').removeClass('ui-icon-blank');
        });
   } else {
        $('div[id*="cloneCheckBox"] > div').each(function() {
            $(this).removeClass('ui-state-active');
            $(this).children('span').removeClass('ui-icon-check');
            $(this).children('span').addClass('ui-icon-blank');
        });
    }
}

Надеюсь, это поможет кому-то, кто использует более поздние версии PF. Я ненавижу делать весь этот трафик ajax за функциональность, которая является чисто клиентской стороной.

Answer 3

Если это может быть кому-то полезно, я сделал этот код, чтобы ОТКЛЮЧИТЬ все переключатели из формы ,,,

Мне нужно было, потому что у меня была панель аккордеона, и на каждой вкладке у меня был selectOneRadio, но при переходе с вкладки мне нужно отменить выбор всех радио других таблиц.

Вы можете пропустить пользовательские идентификаторы и, конечно, пропустить текущую проверку радио

PrimeFaces 4.0

<p:selectOneRadio onchange="workThere(this)"

А вот и функция

        function workThere(e) {
            //alert(e.type + ' - ' + e.parentNode.type);
            var radios = jQuery("input:radio:checked");

            for (var i = 0; i  < radios.length; i++) {
                //escape currentId
                if( (radios[i].id.indexOf(e.id)) > -1 ){
                    continue;
                }
                //escape seleccionador de tipo
                if( (radios[i].id.indexOf('inputTipoLtg')) > -1 ){
                    continue;
                }

                $(radios[i].parentNode.parentNode.children[1]).removeClass('ui-state-active');
                $(radios[i].parentNode.parentNode.children[1]).children('span').removeClass('ui-icon ui-icon-bullet');
                $(radios[i]).attr('checked', false);

            }                                
        }
        ;

Answer 4

jQuery не знает, что p:selectBooleanCheckbox следует рассматривать как флажок. В результате этого селектор :checkbox не распознает его.

Вы также можете рассмотреть возможность использования ^= вместо *= в селекторе атрибутов для идентификатора, если вы хотите сопоставить только идентификаторы , начинающиеся , с "test", а не как id="footestbar".