скрипт, выводящий значения checkbox в строку через запятую
Здравствуйте!
Где бы ни искал - все впустую, одни калькуляторы. Вешаю объявления о продаже автомобилей, переводить комплектацию с немецкого и вписывать от руки каждый раз - глаза в кучу ссыпаются... Есть просьба к умеющим - может кто написать скрипт (желательно полный листинг), чтобы все выбранные чекбоксы (их значения) добавлялись в строку (например, выбираешь параметры "Климат-контроль", "Литые диски" и "SRS" и строка выглядит как "Климат-контроль, Литые диски, SRS") и была бы кнопка "обнулить"? Если это не сильно сложно для умеющих, ибо мои познания дальше HTML 4.0 не ушли. Гуглю три дня, спрашиваю на @Ответах и прочим - результата зеро, а работа стоит... |
Кинули бы хоть HTML - с этим телепаты с моей аватарки не могут справиться. Все чекбоксы на странице ? И что делает кнопка "обнулить" ?
|
Да нет пока никакого html...
ТЗ: пять произвольных чекбоксов на странице, выбранные чекбоксы вписываются в строку. кнопка "обнулить" снимает все галки с чекбоксов. Например, вот html: <html> <head> <meta http-equiv="Content-Type" Content="text/html; Charset=Windows-1251"> СКРИПТ </head> <body> <FORM name=formText> <INPUT id=r1 type=checkbox>text 1<BR> <INPUT id=r2 type=checkbox>text 2<BR> <INPUT id=r3 type=checkbox>text 3<BR> <INPUT id=r4 type=checkbox>text 4<BR> <INPUT onclick=СКРИПТ type=button value=Подбить> <BR>Выбрано:<BR> <INPUT disabled name=ВЫВОД.ЗНАЧЕНИЙ></FORM> </body> </html> Так вот, что нужно сделать, чтобы при выборе checkbox 1 и 3, в выводе значений появилось "text 1, text 3" |
<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> |
Спасибо тебе преогромнейшее, добрый человек!!!
Теперь мои трудозатраты сократятся в разы))) |
А можно сделать так, чтобы знаения чекбоксов выводились не при нажатии на кнопку, а при клике на чекбокс?
|
Цитата:
CheckboxCollection.collectValues вернёт массив значений - получить его можно, когда захочется. и делать с ним можно всё, что захочется :) ... я так понимаю, что вопрос был в стиле "а сделай, чтобы ... ", так что вот пример : <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 = ""; }; // функция вывода. function out () { output.value = myBoxes.collectValues().join(", "); } // обработка изменения чекбоксов. for (var i = 0; i < myBoxes.checkboxes.length; i++) { myBoxes.checkboxes[i].onchange = out; } </script> |
melky, спасибо огромное! Вы - ГЕНИЙ!!!
|
В приведённом примере представлена работа с фиксированным кол-вом полей.
Как сделать то же самое, но с произвольным(любым), кол-вом checkbox? Их может быть 2, 5, 6, 48 ... С ява-скрипт знакома с трудом :) Очень надеюсь на ответ. Спасибо. |
Цитата:
См код : // чекбоксы можно добавить так. myBoxes.checkboxes.push(document.getElementById("drink")); myBoxes.checkboxes.push(document.getElementById("shoes")); Добавлять надо не селекторы, не jQuery-объекты, а именно элементы. |
Часовой пояс GMT +3, время: 04:38. |