Цитата:
document.querySelectorAll('input[type=checkbox]'); Цитата:
Цитата:
|
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> |
Вот, что в результате получилось. Не самая плохая форма выбора/добавления тегов.
Используется, например, для добавления и выбора существующих тегов для новой темы блога, журнала. <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> |
а кнопочку запустить [html run]
|
Что такое: "значения выбранных боксов"?
Вот, вот... и не знаешь, о чём спросили :) 1. "Значение"... Это, например - "Wordpress", оно же - false или true, оно же - чёрт его знает. 2. "Выбранных"... Это - выбранный список полей(извиняюсь за слово "список"), это - отмеченные чекбоксы, это - неизвестно кто, что выбрал. 3. "Боксы"... ну, это я уж не знаю зачем уж так-то уж. 4. Модератор попрёт за флуд. |
И ещё... Баловство, конечно, но для пользователя будет удобно, если уже введённое слово(новый тег) или слова с запятыми не удалялись из поля "tags" при добавлении существующих тегов.
В принципе, можно обойтись и без этого - в хелпе прописала маленькую инструкцию, мол, сначала выбери, а затем уж добавляй новое. Однако, вроде как-то несовременно. Если найдёте время, уважаемые профессора, создайте решение, плз (не сочтите за наголовуусаживание - код пригодится оччень многим новичкам). |
Цитата:
|
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(","); } |
Зачем вообще кнопка
<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> |
lord2kim,
if (document.getElementById("tags").length > 0) , - это условие не работает. Сработало так: if (document.getElementById("tags").length != '') Отличная штука :) Для полного счастья не хватает условий: - удалить при нажатии на кнопку введённые в поле "tags" слова, короче n-символов (допустим - 3), - удалить повторные тэги. Повторные теги образуются, когда в поле вручную введён тег, который далее ошибочно ещё и выбирается из имеющихся. |
Часовой пояс GMT +3, время: 12:10. |