Показать идентификатор при выборе флажка

Question

У меня есть пара флажков, две из которых должны содержать некоторые поля, покрытые идентификатором.

У меня он работает для одного ID, но мне нужно, чтобы он работал на 2 идентификатора.

Вот мой рабочий пример для первой галочки, она также должна работать на второй: http://jsfiddle.net/fourroses666/nane902a/1/

Это мой код:

var checkDisplay = function(check, sl) { 
    form = document.getElementById(sl), check = document.getElementById(check); 
    check.onclick = function(){ 
     form.style.display = (this.checked) ? "block" : "none"; 
     form.reset(); 
    }; 
    check.onclick(); 
}; 

checkDisplay("check", "sl"); 

Answer 1

Я хотел бы добавить классы флажков, чтобы сделать код JavaScript немного более компактными и легко позволяют добавлять дополнительные галочки в миксе.

Что-то вроде этого:

var frm = document.getElementById('sl'); 
var check = document.getElementsByClassName('showsubform'); 
for (var i = 0, length = check.length; i < length; i++) { 
    check[i].addEventListener('click', function() { frm.style.display = (this.checked) ? "block" : "none"; }); 
} 

Я редактировал your fiddle и создал рабочий пример там.

Если вы предпочитаете использовать onclick для поддержки IE8, вы можете просто заменить addEventListener с:

check[i].onclick = function() { frm.style.display = (this.checked) ? "block" : "none"; }; 

Answer 2

Для второго флажка, checkDisplay("check2", "sl");

Однако, вам необходимо удалить form.reset() из функции onClick. Это ошибки и, таким образом, останавливает выполнение скрипта.

Answer 3

Чтобы определить свои флажки, вам необходимо использовать атрибут class. Затем присоедините событие onclick ко всем из них. Пример этот jsfiddle:

var checkDisplay = function() { 
     var form = document.getElementById('sl'); 
     var checks = document.getElementsByClassName('yourClass'); 
     for (var i = 0; i < checks.length; i++) { 
      checks[i].onclick = function(){ 
       form.style.display = (this.checked) ? "block" : "none"; 
       form.reset(); 
      }; 
     } 
    }; 

checkDisplay(); 

https://jsfiddle.net/nane902a/8/