Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 14.09.2012, 20:58
Новичок на форуме
Отправить личное сообщение для Pincher Посмотреть профиль Найти все сообщения от Pincher
 
Регистрация: 14.09.2012
Сообщений: 3

скрипт, выводящий значения checkbox в строку через запятую
Здравствуйте!
Где бы ни искал - все впустую, одни калькуляторы.

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

Есть просьба к умеющим - может кто написать скрипт (желательно полный листинг), чтобы все выбранные чекбоксы (их значения) добавлялись в строку (например, выбираешь параметры "Климат-контроль", "Литые диски" и "SRS" и строка выглядит как "Климат-контроль, Литые диски, SRS") и была бы кнопка "обнулить"?

Если это не сильно сложно для умеющих, ибо мои познания дальше HTML 4.0 не ушли.

Гуглю три дня, спрашиваю на @Ответах и прочим - результата зеро, а работа стоит...
Ответить с цитированием
  #2 (permalink)  
Старый 14.09.2012, 21:08
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

Кинули бы хоть HTML - с этим телепаты с моей аватарки не могут справиться. Все чекбоксы на странице ? И что делает кнопка "обнулить" ?
Ответить с цитированием
  #3 (permalink)  
Старый 14.09.2012, 21:16
Новичок на форуме
Отправить личное сообщение для Pincher Посмотреть профиль Найти все сообщения от Pincher
 
Регистрация: 14.09.2012
Сообщений: 3

Да нет пока никакого 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"

Последний раз редактировалось Pincher, 14.09.2012 в 21:22.
Ответить с цитированием
  #4 (permalink)  
Старый 14.09.2012, 22:02
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

<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>

Последний раз редактировалось melky, 14.09.2012 в 22:05.
Ответить с цитированием
  #5 (permalink)  
Старый 14.09.2012, 22:38
Новичок на форуме
Отправить личное сообщение для Pincher Посмотреть профиль Найти все сообщения от Pincher
 
Регистрация: 14.09.2012
Сообщений: 3

Спасибо тебе преогромнейшее, добрый человек!!!
Теперь мои трудозатраты сократятся в разы)))
Ответить с цитированием
  #6 (permalink)  
Старый 26.09.2012, 10:36
Новичок на форуме
Отправить личное сообщение для Амидала Посмотреть профиль Найти все сообщения от Амидала
 
Регистрация: 26.09.2012
Сообщений: 2

А можно сделать так, чтобы знаения чекбоксов выводились не при нажатии на кнопку, а при клике на чекбокс?
Ответить с цитированием
  #7 (permalink)  
Старый 26.09.2012, 11:25
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

Сообщение от Амидала
А можно сделать так, чтобы знаения чекбоксов выводились не при нажатии на кнопку, а при клике на чекбокс?
вывод производится не CheckboxCollection, а другим кодом.
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>
Ответить с цитированием
  #8 (permalink)  
Старый 26.09.2012, 11:33
Новичок на форуме
Отправить личное сообщение для Амидала Посмотреть профиль Найти все сообщения от Амидала
 
Регистрация: 26.09.2012
Сообщений: 2

melky, спасибо огромное! Вы - ГЕНИЙ!!!
Ответить с цитированием
  #9 (permalink)  
Старый 05.10.2012, 18:12
Аспирант
Отправить личное сообщение для Svetlana_ Посмотреть профиль Найти все сообщения от Svetlana_
 
Регистрация: 05.10.2012
Сообщений: 31

В приведённом примере представлена работа с фиксированным кол-вом полей.
Как сделать то же самое, но с произвольным(любым), кол-вом checkbox? Их может быть 2, 5, 6, 48 ...

С ява-скрипт знакома с трудом

Очень надеюсь на ответ.
Спасибо.

Последний раз редактировалось Svetlana_, 05.10.2012 в 18:17.
Ответить с цитированием
  #10 (permalink)  
Старый 05.10.2012, 18:40
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

Сообщение от Svetlana_ Посмотреть сообщение
В приведённом примере представлена работа с фиксированным кол-вом полей.
Как сделать то же самое, но с произвольным(любым), кол-вом checkbox? Их может быть 2, 5, 6, 48 ...

С ява-скрипт знакома с трудом

Очень надеюсь на ответ.
Спасибо.
Добавление \ удаление чекбоксов в коллекцию происходит так же, как и любое добавление элемента в массив.

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


Добавлять надо не селекторы, не jQuery-объекты, а именно элементы.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
скрипт работает в IE через раз jsVAN Internet Explorer 2 10.03.2011 03:27
Передача полю объекта - массиву, значения элемента через set метод poorking Общие вопросы Javascript 1 13.02.2011 20:22
Изменение размеров картинки через скрипт SLV Общие вопросы Javascript 4 27.12.2010 11:40
Как зделать чтобы скрипт срабатывал через определенное каличество посетителей ? volodimirklimenko Общие вопросы Javascript 1 01.12.2010 23:13
Управление фоном через скрипт, находящийся в body Amberwood Общие вопросы Javascript 3 19.10.2009 23:52