Клонируем input checkbox значение name
Всем привет нужна помощь сам сильно не владею javascript в процессе изучения.
Нужно checkbox который по клику сделает clon значения name и сможет передать его в другой input в атрибут value без лишних элементов HTMl и при этом нужно чтоб были классы там чекбоксы будут множественные. Мне удалось найти подходящий javascript для этой задачи но там есть проблема то что он делает клон и передает его в элемент label, а мне надо чтоб был чистое текстовое значение name. Пробовал сам передать в input но получалась ерунда у меня туда по подали только элементы HTML http://prntscr.com/c6m778 Прошу Вас специалисты javascripta помогите очень надо. <script src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript"></script>
<div id="area">
<input type="checkbox" /> <label>1</label>
<input type="checkbox" /> <label>2</label>
<input type="checkbox" /> <label>3</label>
<input type="checkbox" /> <label>4</label>
<input type="checkbox" /> <label>5</label>
<input type="checkbox" /> <label>6</label>
<input type="checkbox" /> <label>7</label>
<input type="checkbox" /> <label>8</label>
<input type="checkbox" /> <label>9</label>
</div>
<div id="clones">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<script type="text/javascript">
$('#area input:checkbox').each(function (i, g) {
this.onchange = function () {
if (this.checked) {
$('#clones span').eq(i).html($(g).next().clone());
} else {
$('#clones span').eq(i).empty();
}
}
});
</script>
|
aleksandr-n,
не осилил вашего описания. |
Цитата:
|
Клонируем input checkbox со значением name
Хочу ещё раз описать суть задачи.
По хорошему нужно чтоб работало так. Кликаем по checkbox(сам) при клике создаётся клон input checkbox со значением name. Клон (input checkbox со значением name) должен появится в той области где я ему укажу. После того как были созданы если их много или один клон по клику на кнопку submit нужно передать значение клона name в один input его атрибут value, так чтоб value попали только чистый текст значения name без всяких элементов HTML тегов. Я нашёл один скрипт который меня удовлетворяет на половину его работы. Он создаёт клоны там где мне нужно, но потом я не могу взять и передать эти клоны в другой input в атрибут value. Вот скриншот того что у меня получилось. http://prntscr.com/c6pnhu Старался расписать как можно подробней надеюсь что кто-то сможет мне помочь решить эту задачу. Demo можно увидеть здесь http://javascript.ru/forum/jquery/96...ehlementy.html <script src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript"></script>
<div id="area">
<input type="checkbox" /> <label>1</label>
<input type="checkbox" /> <label>2</label>
<input type="checkbox" /> <label>3</label>
<input type="checkbox" /> <label>4</label>
<input type="checkbox" /> <label>5</label>
<input type="checkbox" /> <label>6</label>
<input type="checkbox" /> <label>7</label>
<input type="checkbox" /> <label>8</label>
<input type="checkbox" /> <label>9</label>
</div>
<div id="clones">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<script type="text/javascript">
$('#area input:checkbox').each(function (i, g) {
this.onchange = function () {
if (this.checked) {
$('#clones span').eq(i).html($(g).next().clone());
} else {
$('#clones span').eq(i).empty();
}
}
});
</script>
|
Цитата:
Что значит значение name? Цифры 1,2,3,4,5,6,7,8,9? Если цифры, то это innerHTML в теге <label>, а не name. |
Цитата:
<INPUT type="checkbox" name="Установка ванны">при клике по чекам в таблице, в той области где мне нужно после чего по нажатию на кнопку отправить передать значение name в пустое поле <input type="hidden" value="ТУТ ДОЛЖНО ПОЯВИТСЯ ЗНАЧЕНИЕ NAME ТОЛЬКО ТЕКСТ И НИЧЕГО БОЛЬШЕ" name="form_text_38">которое по умолчанию скрыто hidden Из того скрипта что мне удалось найти он да создаёт клон <label>, но со значением name, но не может передать это значение дальше по клику на кнопку отправить в пустое поле inputa |
aleksandr-n,
да я не понял и не понимаю |
Цитата:
http://prntscr.com/c6pnhu как ещё мне объяснить. 1 Делаем клик на <INPUT type="checkbox"> получаем его значение name 2 Передаём в ту область которое нужно мне. 3 По нажатию на кнопку отправить эти значения клонов name передать в пустое поле которое по умолчанию скрыто. |
Цитата:
Цитата:
|
Если честно, надоел уже это JavaScript. Записывал 2 раза в обработчик события onchange функцию, но эффект всегда один и тот же: пока идет запись видно что в строке-переменной onchange записывается функция, как только выходит из записи сразу же там ничего нет(null, если быть точным).
2 способа записи: 1) $('#area input:checkbox').each(function(i, v){
document.body.innerHTML += "<br>Прошли по "+i+"-му элементу";
this.onchange = function OnChangeFunction(){
document.body.innerHTML += "Изменен "+i+"-ый checkbox";
if(this.checked){
$('#clones span')[i].html = $('label')[i].html;
document.body.innerHTML += "Выделен "+i+"-ый checkbox";
}
}
});
2) for(prop in mi)
{
//foreach
mi[prop].onchange = function mo()
{
document.body.innerHTML += "Изменен "+prop+"-ый checkbox";
}
}
Может кто-нибудь скажет почему так происходит, т.е. почему после окончания записи в строке-переменной onchange находится null??? |
Цитата:
|
А что нужно написать?
|
Strongman,
https://learn.javascript.ru/document Цитата:
|
Strongman,
Спасибо что откликнулись мне на помощь но это конечно не то что я хотел. Цитата:
|
Я вообще проблему решил вчера вот так:
for(prop in mi)
{
//foreach
mi[prop].onchange = function add()
{
var element = document.createElement('div');
element.innerHTML = "Изменен "+prop+"-ый checkbox";
element.id = 'div123';
document.body.appendChild(element);
}
}
Александр, я думаю, что здесь есть элементы того, что Вы хотите. |
$('#area input:checkbox').each(function(i, v){
document.body.innerHTML += "<br>Прошли по "+i+"-му элементу";
this.onchange = function OnChangeFunction(){
document.body.innerHTML += "Изменен "+i+"-ый checkbox";
if(this.checked){
$('#clones span')[i].html = $('label')[i].html;
document.body.innerHTML += "Выделен "+i+"-ый checkbox";
}
}
});
- вот этот код работает некорректно, уже не помню что там, но работает некорректно. Имею ввиду не весь код, а выбор INPUT-ов в первой строке. Откуда Вы его взяли? Просто так откуда-то скопировали?Я написал свой: var mi = document.getElementsByTagName('input'),
ms = document.getElementsByTagName('span');
- мне кажется он работает лучше. |
Ооо, ничего себе, заработало! Я даже и не ждал этого:).
var prop, n = 0;
var mi = document.getElementsByTagName('input'),
ms = document.getElementsByTagName('span');
for(prop in mi)
{
//foreach
mi[prop].onchange = function add()
{
ms[this.nextSibling.innerHTML-1].innerHTML = this.nextSibling.innerHTML;
}
n++;
}
|
Цитата:
ТС, просто опиши русским языком, какой интерфейс ты делаешь. Может быть оно давно сделано, или делается не корованами. Цитата:
|
Цитата:
|
Попробуй сам, только перед скриптом нужно вставить вот этот HTML:
<script src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript"></script> <div id="area"> <input type="checkbox"><label>1</label></input><br> <input type="checkbox"><label>2</label></input><br> <input type="checkbox"><label>3</label></input><br> <input type="checkbox"><label>4</label></input><br> <input type="checkbox"><label>5</label></input><br> <input type="checkbox"><label>6</label></input><br> <input type="checkbox"><label>7</label></input><br> <input type="checkbox"><label>8</label></input><br> <input type="checkbox"><label>9</label></input><br> </div><br> <div id="clones"> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> </div> |
| Часовой пояс GMT +3, время: 20:08. |