Как продублировать и вывести отмеченные чек-боксы?

Question

[danil_linkins]

Добрый день, есть некий список чек-боксов в выпадающем меню:

<ul>
    <li>
        <input id="crussian" type="checkbox" name="russian" checked hidden />
        <label for="crussian">Русский язык</label>
    </li>
    <li>
        <input id="cmath" type="checkbox" name="mathem" hidden />
        <label for="cmath">Математика</label>
    </li>
    <li>
        <input id="cphysic" type="checkbox" name="physic" hidden />
        <label for="cphysic">Физика</label>
    </li>
    <li>
        <input id="cinform" type="checkbox" name="inform" hidden />
        <label for="cinform">Информатика</label>
    </li>
    <li>
        <input id="cchemis" type="checkbox" name="chemistry" hidden />
        <label for="cchemis">Химия</label>
    </li>
    <li>
        <input id="cbiolog" type="checkbox" name="biology" hidden />
        <label for="cbiolog">Биология</label>
    </li>
    <li>
        <input id="clitter" type="checkbox" name="literature" hidden />
        <label for="clitter">Литература</label>
    </li>
    <li>
        <input id="csociety" type="checkbox" name="society" hidden />
        <label for="csociety">Обществознание</label>
    </li>
    <li>
        <input id="cufo" type="checkbox" name="ufology" hidden />
        <label for="cufo">Уфология</label>
    </li>
    <li>
        <input id="cnum" type="checkbox" name="number" hidden />
        <label for="cnum">Нумерология</label>
    </li>
</ul>

Как можно ниже этого блока вывести отмеченные чек-боксы в строку?

Answer 1

[Егор Живагин]

Сначала вопрос - jQuery подключена? Или чистый JS ?

Comments

[danil_linkins]

Подключена

[Егор Живагин]

danil_linkins: минутку, сейчас оформлю

[Егор Живагин]

danil_linkins : вот

[danil_linkins]

Егор Живагин: Это гениально!
Спасибо огромное.

Только есть один вопрос, а если чек уже отмечен по дефолту (checked), то как его можно вывести сразу с прогрузки страницы?

[danil_linkins]

Егор Живагин: А все я понял, затупил )
спасибо!

Answer 2

[Reactor]

через CSS

Comments

[Reactor]

<script>
// схавает пустоту, элемент, или коллекцию элементов.
function CheckboxCollection (checkboxes) {
    this.checkboxes = checkboxes ? "nodeType" in checkboxes ? [checkboxes] : Array.prototype.slice.call(checkboxes) : [];
}

// checkboxes = [ /* чекбокс1, чекбокс2, ..., чекбоксN */ ]; <--- массив элементов.

// вернёт собранные в массив значения отмеченных чекбоксов.
CheckboxCollection.prototype.collectValues = function () {

    var i = this.checkboxes.length, buffer = [];
    
    while (i--) {
        if (this.checkboxes[i].checked) {
            buffer.push(this.checkboxes[i].value);
        }
    }
    
    return buffer;
};
</script>

<label><input type="checkbox" name="drink" value="beer" id="drink"> Пивко </label>
<br>
<input type="checkbox" name="shoes" value="bus" id="shoes"><label for="shoes"> Шина </label>
<hr>

<input id="output">

<button id="clear">Очистить</button>
<button id="fill">Заполнить</button>

<script>
// коллекция чекбоксов.
var myBoxes = new CheckboxCollection();

// чекбоксы можно добавить так.
myBoxes.checkboxes.push(document.getElementById("drink"));
myBoxes.checkboxes.push(document.getElementById("shoes"));

// куда выводим.
var output = document.getElementById("output");

// клик по кнопке "очистить"
document.getElementById("clear").onclick = function () {
    output.value = "";
};

// клик по кнопке "заполнить"
document.getElementById("fill").onclick = function () {
    output.value = myBoxes.collectValues().join(", ");
};
</script>

[danil_linkins]

Reactor: А как это можно сделать в автоматическом режиме?

Так что лейблы отмеченных чек-боксов сразу отображаются в каком то поле.

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

Спасибо за помощь, очень слабо разбираюсь в JS.