Форум Сайтостроение Веб-строительство

[JS] Добавить значения из CheckBox в Input

[Удален]
1136

Есть три чекбокса 

<input id="add1" type="checkbox" value="Значение 1"> 

<input id="add2" type="checkbox" value="Значение 2"> 

<input id="add3" type="checkbox" value="Значение 3">

И обычный input 

<input type="text" id="inp">

Подскажите, как можно по клику на ЧЕКБОКС добавлять значения в input.

Чтобы могли получиться при трех выбранных чекбоксах в ИНПУТЕ:

Значение 1, Значение 1, Значение 1

siv1987
На сайте с 02.04.2009
Offline
427
siv1987
#1 


$('.add').click(function(){

	var inp = $('#inp');

	var val = inp.val() ? inp.val()+', '+$(this).val() : $(this).val();

	

	inp.val(val);

});

добавить к чекбоксам класс add

rammlied
На сайте с 13.04.2011
Offline
56
rammlied
#2
siv1987:

$('.add').click(function(){

	var inp = $('#inp');

	var val = inp.val() ? inp.val()+', '+$(this).val() : $(this).val();

	

	inp.val(val);

});


добавить к чекбоксам класс add

Это если jQuery подключен. И кстати не уверен что если снять выделение то значение не добавится снова, хотя по заданию должно убираться.

на чистом Js каждому чекбоксу на онклик навешиваете функцию .

function ff(){

document.getElementByID("inp").value=

(document.getElementByID("add1").checked?document.getElementByID("add1").value:"") +

(document.getElementByID("add2").checked?document.getElementByID("add2").value:"") +

(document.getElementByID("add2").checked?document.getElementByID("add2").value:"");

}


<input id="add1" type="checkbox" onclick="ff();" value="Значение 1">
<input id="add2" type="checkbox" onclick="ff();" value="Значение 2">
<input id="add3" type="checkbox" onclick="ff();" value="Значение 3">

Если количество чекбоксов не фиксированное то функция должна принимать на вход сам чекбокс. но тогда нужно парсить уже содержимое инпута.

function ff(checbox){

if (checbox.checked)

document.getElementByID("inp").value+=checbox.value;

else

document.getElementByID("inp").value=document.getElementByID("inp").value.replace(checbox.value,"");

}


<input id="add1" type="checkbox" onclick="ff(this);" value="Значение 1">
<input id="add2" type="checkbox" onclick="ff(this);" value="Значение 2">
<input id="add3" type="checkbox" onclick="ff(this);" value="Значение 3">
делаю СДЛы, получаются ГСы )
Настройка событий Google Analytics 66% россиян считают, что 69 полезных букмарклетов, о
siv1987
На сайте с 02.04.2009
Offline
427
siv1987
#3
rammlied:
Это если jQuery подключен.

Если автор не уточнил, будем исходить из того что подключен.

rammlied:
хотя по заданию должно убираться.

Укажите где об этом указано в задание. Я предположу, что по логике при снятие чекбокса значение должно удалятся, но ТС об этом ничего не сказал потому и не стал сильно усложнять код.

rammlied:
на чистом Js каждому чекбоксу на онклик навешиваете функцию .

Уныло, хотябы потому что можно использовать массив значений, не говоря о логике.

Google добавил документацию для Google: как настроить таргетинг Яндекс.Директ изменит логику учета

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий