Отметки, които развиват и скриват текст

<!DOCTYPE html>
<html>
<body><form style="padding-left:5px">
<input type="checkbox" id="BoxName1" onclick="ShowCheckboxDiv('BoxName', 3)">Покажи избор 1<br>
<input type="checkbox" id="BoxName2" onclick="ShowCheckboxDiv('BoxName', 3)">Покажи избор 2<br>
<input type="checkbox" id="BoxName3" onclick="ShowCheckboxDiv('BoxName', 3)">Покажи избор 3<br>
</form></body></html><html><script>
function ShowCheckboxDiv (IdBaseName, NumberOfBoxes) {
    for (x=1;x<=NumberOfBoxes;x++) {
        CheckThisBox = IdBaseName + x;
        BoxDiv = IdBaseName + x +'Div';
    if (document.getElementById(CheckThisBox).checked) {
        document.getElementById(BoxDiv).style.display = "block";
        }
    else {
        document.getElementById(BoxDiv).style.display = "none";
        }
    }
    return false;
}
</script>
<div id="BoxName1Div" style="display:none;">Избор 1</div>
<div id="BoxName2Div" style="display:none;">Избор 2</div>
<div id="BoxName3Div" style="display:none;">Избор 3</div></html>

Резултат:
  • За да добавите нов избор, добавете: <input type="checkbox" id="BoxName1" onclick="ShowCheckboxDiv('BoxName', 3)">Покажи избор 1<br>
  • id="BoxName1 - Цифрите не бива да се повтарят затова, когато добавяте нов избор трябва да се със собствено число.
  • За да добавите текст на съответния избор, добавете: <div id="BoxName1Div" style="display:none;">Избор 1</div>
  • id="GroupName1Div - Цифрата трябва да отговаря на id="GroupName1, от който при активирането му, ще показва текста.
  • "ShowCheckboxDiv('BoxName', 3)" - Числото трябва да отговаря на броят на отметките.

Използвайте го в Alle.bg с ниво на защита „Изолиране на кода от съдържанието на страница“.
В момента разглеждате олекотената мобилна версия на уебсайта. Към пълната версия.