Javascript: несколько флажков, вызывающих одну функцию

Question

У меня есть несколько текстовых полей в моей форме. Я бы поставил флажок рядом с каждым текстовым полем. Если я поставлю флажок, я хотел бы, чтобы содержимое соответствующего текстового поля было скопировано в одну большую текстовую область (область большого текста). Например, если я набираю «яблоки» в текстовое поле №1 и устанавливаю флажок рядом с текстовым полем № 1, я хотел бы, чтобы «яблоки» копировались в область большого текста; то, если я наберу «апельсины» в текстовое поле №2, я бы хотел, чтобы «апельсины» были скопированы в область большого текста и добавлены яблоки, поэтому область большого текста будет содержать «яблоки апельсинов».

Я могу выполнить описанное выше, если вручную ввести имена полей в функцию, но это громоздко. Я хотел бы иметь простой скрипт, который изменяется в зависимости от того, какой вход/checkbox вызывает его.

В приведенном ниже сценарии текстовая область с именем «copyto» - это моя большая текстовая область, которую я хочу скопировать. Если вы установите флажок «Копировать из №1», функция в настоящее время копирует текст из этого поля в «copyto» "текстовая область. Однако при проверке флажка «Копировать из № 2» мне нужно изменить функцию, чтобы разрешить копирование содержимого окна «Копировать из №2» в текстовую область «copyto».

вот jsfiddle к ниже: http://jsfiddle.net/33RLk/

<script> 
function Copy(f) { 
if(f.copyfrom1.checked == true) { 
f.copyto.value += '\n' + f.copyfrom.value; 

} 
} 
</script> 

<form> 
Copy From #1: 
<input type="text" name="copyfrom"> 
<br> 
<input type="checkbox" name="copyfrom1" onclick="Copy(this.form)"> 
<em>Check to copy "Copy From #1" box to "Copy to" box.</em> 
<P> 
<br> 

Copy From #2: 
<input type="text" name="copyfromtwo"> 
<br> 
<input type="checkbox" name="copyfrom2" onclick="Copy(this.form)"> 
<em>Check to copy "Copy From #2" box to "Copy to" box.</em> 
<P> 
<br> 
Copy to: 
<textarea name="copyto" cols="25" rows="4">Text</textarea> 

</form> 

Answer 1

Использование JQuery:

Примечание именование/id'ing различных элементов формы.

<form> 
Copy From #1: 
<input type="text" id="copyfrom_1"> 
<br> 
<input type="checkbox" name="copyFrom" id="check_copyfrom_1"> 
<em>Check to copy "Copy From #1" box to "Copy to" box.</em> 
<P> 
<br> 

Copy From #2: 
<input type="text" id="copyfrom_2"> 
<br> 
<input type="checkbox" name="copyFrom" id="check_copyfrom_2"> 
<em>Check to copy "Copy From #2" box to "Copy to" box.</em> 
<P> 
<br> 
Copy to: 
<textarea id="copyto" cols="25" rows="4">Text</textarea> 

</form> 

Затем, используя JQuery селекторы, мы можем использовать одну функцию, чтобы посмотреть на любое количество пар флажок/текстовые поля:

// this selector finds any items whose id starts with `check_` 
$('[id^=check_]').click(function() { 
    // this next line will get the number of the text field/checkbox pair to 
    // look at (copyfrom_1/check_copyfrom_1, etc.) 
    var idx = $(this).attr('id').split('_').pop(); 
    var copyTo = $('#copyto'); 

    // now check to see if the current state of the box is checked or unchecked 
    if($('#check_copyfrom_'+idx).is(':checked')){ 
     // if it's checked, append the value to the textarea 
     copyTo.val(copyTo.val() + $('#copyfrom_'+idx).val()); 
    }  
}) 

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

Вот fiddle.

Answer 2

Измените ваш onclick так что вы просто передать this, не this.form:

onclick="Copy(this)" 

Теперь у вас есть ссылка на input[type="checkbox"] элемент. Вы можете использовать его и nextSibling свойства (возможно, в петле), чтобы найти input[type="text"] перед ним и textarea, что является ребенком одного из своих «следующих» братьев и сестер.

С разметкой вы цитируемая, предполагая, что Copy принимает ссылку на input[type="checkbox"] (например ,. вы передаете this), то:

function Copy(checkbox) { 
    var textInput; 
    var textArea; 

    textInput = checkbox.previousSibling.previousSibling; // Have to skip the <br> 
    textArea = checkbox.nextSibling.nextSibling.getElementsByTagName('textarea')[0]; 

    // Now copy the value from textInput to textArea 
} 

Это становится намного легче, хотя, если вы поместите каждую их группу в какой-то контейнер (например, div), потому что тогда вы можете использовать parentNode (возможно, несколько раз), пока не дойдете до div, затем либо getElementsByTagName, либо (на modern browsers) querySelector, чтобы найти соответствующие элементы в пределах div более надежным способом. (querySelector находит первый элемент внутри вызываемого вами элемента, который соответствует выбранному вами CSS-селектору).