Проверьте, установлены ли флажки при загрузке страницы, и добавьте класс в родительский html li. - PullRequest
Новая
       13

Проверьте, установлены ли флажки при загрузке страницы, и добавьте класс в родительский html li.

1 голос
/ 13 мая 2010

Я ищу способ сделать это с прототипом, этот js, должен загрузить страницу и взаимодействовать со всеми элементами (в данном случае входными данными - флажками) с заданным идентификатором и назначить класс его родителю <li></li>

JS: 

function changeSelectionStyle(id) {

 var inputId = id.substr(0,id.length-2);
 if(document.getElementById(inputId).checked){document.getElementById(id).className = 'yes';}
 alert(document.getElementById(inputId).checked);

 /*
  * if(document.getElementById(id).className != 'yes'){
  * document.getElementById(id).className = 'yes';
  *  } else{document.getElementById(id).className = '';}
  */

}

И HTML (фрагмент), который взаимодействует с этим JS: 

<li id="selectedAuthorities-4_1li">
   <input type="checkbox" id="selectedAuthorities-4_1" name="selectedAuthorities" value="ROLE_ADD_COMMENT_TO_CV" checked="checked" onclick="changeSelectionStyle(this.id + 'li'); checkFatherSelection(this.id);">
       <a href="#" onclick="document.getElementById('selectedAuthorities-4_1').click(); return false;">
           Agregar comentario
           <samp><b></b>Permite agregar comentario en el detalle</samp>
       </a>
</li>

После итерации, флажок проверяется, он должен добавить class="yes" к <li id="selectedAuthorities-4_1li">

Ответы [ 2 ]

3 голосов
/ 13 мая 2010

Для запуска чего-либо при загрузке страницы (фактически, когда DOM готов), используйте это: 

document.observe("dom:loaded", function() {
    init()
});

Затем вы можете выбрать все входные данные и, если они отмечены, добавить имя класса к его родительскому элементу: 

function init() {
    $(document.body).select('input').each(function(element) {
        if(element.checked) {
            element.up().addClassName('yes')
        }
    })
}

Если вы хотите получить более конкретную информацию и выбрать LI (если есть другая разметка, обертывающая ввод), вы можете заменить: 

element.up('li').addClassName('yes')
1 голос
/ 13 мая 2010

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

<li id="selectedAuthorities-4_1li">
   <input type="checkbox" class="example_class">
...
</li>

Затем, используя прототип, вы можете перебирать все флажки, используя селектор CSS $$ 

$$('.example_class');

Предполагая, что вы хотите добавить «выбранный» класс к родительскому флажку, вы можете сделать: 

$$('.example_class').each(function(element) {
    if (element.checked) {
        element.up().addClassName('selected');
    }
});

Чтобы запустить весь этот код после завершения загрузки dom, вы можете обернуть весь этот код внутри этого наблюдателя: 

document.observe("dom:loaded", function() {
    //the above code here
});

Если вы хотите использовать прототип (или любую инфраструктуру javascript), потратьте некоторое время на его изучение, вы получите гораздо лучший код, чем тот, который вы создаете без него

...