Вывести массив с checkbox

[bes]

Использовать 'input' удобно ли? В форме могут оказаться другие поля, не чекбокс.

см. по ситуации
document.querySelectorAll('input[type=checkbox]');

"так и тут не экстрасенсы" - "вы не знаете? так я вам объясню"
Русский язык не имеет ничего общего с производным от языка - проггерским русским. Кроме букв. Нонсенс. Но так есть. Не всегда найдёшься в какой такой форме задать вопрос, чтобы он был понятен не только русскому, который суть ухватит "влёт", но и русскому проггеру. Что поделать. Изменение сознания налицо

Что такое

значения выбранных боксов.

?

[nerv_]

bes, ES5

<form  method=get action="#" name="chekcms">
    <input type=checkbox name="wordpress">wordpress<br>
    <input type=checkbox name="ucoz">ucoz<br>
    <input type=checkbox name="dle">dle<br>
</form>

<button id="myBut">click</button>

<script>
    myBut.onclick = function () {

        alert(
            Array.prototype.slice.call( document.getElementsByTagName( 'input' ) )
                .map( function( input ) {
                    return input.checked;
                })

        );
    }
</script>

[Svetlana_]

Вот, что в результате получилось. Не самая плохая форма выбора/добавления тегов.

Используется, например, для добавления и выбора существующих тегов для новой темы блога, журнала.

<form method="post"> 
 
    <input type="text" id="tags" style=" width:300px" /> <a href="javascript:invWin()"> Selected Tags</a>
    
    <div id="theWin" style=" background:#f4f4f4; border:1px solid #ccc; margin-left: 300px; padding: 4px; visibility:hidden; position:absolute;">
        <input type="checkbox" name="wordpress" />wordpress<br>
        <input type="checkbox" name="ucoz" />ucoz<br>
        <input type="checkbox" name="dle" />dle<br>
    </div>
    
</form>
<button id="myBut">click</button>

<script>
function invWin(){
	if (document.getElementById("theWin").style.visibility =="visible") {
		document.getElementById("theWin").style.visibility="hidden"; 
	} else {
		document.getElementById("theWin").style.visibility="visible";
	}
}

myBut.onclick = function () {
	var inp = document.querySelectorAll('input[type=checkbox]');
	var length = inp.length;
	var mas = [];

	for (var i = 0; i < length; i++) {
		if (inp[i].checked) {
			mas.push(inp[i].nextSibling.nodeValue);
		}
	}
	document.getElementById("tags").value = mas.join(',');
}
</script>

[bes]

а кнопочку запустить [html run]

[Svetlana_]

Что такое: "значения выбранных боксов"?

Вот, вот... и не знаешь, о чём спросили

1. "Значение"... Это, например - "Wordpress", оно же - false или true, оно же - чёрт его знает.

2. "Выбранных"... Это - выбранный список полей(извиняюсь за слово "список"), это - отмеченные чекбоксы, это - неизвестно кто, что выбрал.

3. "Боксы"... ну, это я уж не знаю зачем уж так-то уж.

4. Модератор попрёт за флуд.

[Svetlana_]

И ещё... Баловство, конечно, но для пользователя будет удобно, если уже введённое слово(новый тег) или слова с запятыми не удалялись из поля "tags" при добавлении существующих тегов.

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

Если найдёте время, уважаемые профессора, создайте решение, плз (не сочтите за наголовуусаживание - код пригодится оччень многим новичкам).

[bes]

И ещё... Баловство, конечно, но для пользователя будет удобно, если уже введённое слово(новый тег) или слова с запятыми не удалялись из поля "tags" при добавлении существующих тегов.

это как?

[lord2kim]

Svetlana_,

if (document.getElementById("tags").length > 0) {
document.getElementById("tags").value += document.getElementById("tags").value.charAt(document.getElementById("tags").length-1) != "," ? ","+mas.join(',') : mas.join(",");
} else {
document.getElementById("tags").value = mas.join(",");
}

[bes]

Зачем вообще кнопка

<form method="post"> 
	<input type="text" id="tags" style=" width:300px"/> 
	<a href="#"> Selected Tags</a>
	<div id="theWin" style=" background:#f4f4f4; border:1px solid #ccc; margin-left: 300px; padding: 4px; visibility:hidden; position:absolute;">
		<input type="checkbox" name="wordpress" />wordpress<br>
		<input type="checkbox" name="ucoz" />ucoz<br>
		<input type="checkbox" name="dle" />dle<br>
	</div>
</form>

<script>
window.onload = function () {
	var form = document.forms[0];
	var inp = form.children[0];
	var  st = form.children[2].style;
	
	form.onclick = function (e) {
		e = e || event;
		var target = e.target || e.srcElement;
		if (target.tagName == 'A') {
			(st.visibility != 'visible') ? st.visibility = 'visible': st.visibility = 'hidden';
		} else 
		if (target.checked) {
			inp.value += target.nextSibling.nodeValue + ', ';
		} else {
			inp.value = inp.value.replace(target.nextSibling.nodeValue + ', ', '');
		}
	}
}
</script>

[Svetlana_]

lord2kim,

if (document.getElementById("tags").length > 0)

, - это условие не работает.
Сработало так:

if (document.getElementById("tags").length != '')

Отличная штука

Для полного счастья не хватает условий:
- удалить при нажатии на кнопку введённые в поле "tags" слова, короче n-символов (допустим - 3),
- удалить повторные тэги.

Повторные теги образуются, когда в поле вручную введён тег, который далее ошибочно ещё и выбирается из имеющихся.