javascriptまたはjqueryを使用して同じIDを持つ複数のテキストエリアの内容をクリップボードにコピー

Question

私は3つのブートストラップモーダルを個別のテキストエリアに表示し、それぞれのテールエリアのテキストエリアにチェックボックスの値を表示します。

（私はjqueryのチェックボックスの値をキャプチャし、それぞれのtexareasでそれらを置くことを持っている。それが正常に動作しているので）

しかし、私はへのonclickも、そのポイントを開き、各モーダルでコピーボタンを入れています各テキストエリアの内容をクリップボードにコピーする機能。しかし、最初のモーダル値だけがコピーされます。他のモーダルのコピーボタンをクリックすると、値はコピーされません。私は行方不明のものがありますか？

textareaはdivからcheckidをキャプチャしています。 textareaはidをcheckidとして持っています。コピーボタンは、テキストエリアの内容をコピーするように動作する。最初のモーダルのコピーボタンは他のモーダルではなく動作します。

function CopyNotes() { 
 

 
var DataSet = document.getElementByID('checkid').value; 
 

 
window.clipboardData.setData("TEXT", DataSet); 
 

 
} 
 

 

 
/* copying checkid */ 
 

 
$("#button1").click(function() { var p=$("#MaybeResolved #checkid"); $(p).html("Cx Verified " + '\n' + "The Following sports I play"); 
 
$.each($("input[name='Sport']:checked"), function() { 
 
$(p).html($(p).html() + '\n' + $(this).val()); }); 
 
$(p).html($(p).html() + '\n --------------------------------------------------------------\n Thank you see you again. \n --------------------------------------------------------------'); 
 
}); \t 
 

 
//Touch does not respond \t 
 
$("#button2").click(function() { var p=$("#Resolved #checkid"); $(p).html("Cx Verified " + '\n' + "The Following sports I play"); 
 
$.each($("input[name='Sport']:checked"), function() { 
 
$(p).html($(p).html() + '\n' + $(this).val()); }); 
 
$(p).html($(p).html() + '\n --------------------------------------------------------------\n Thank you see you again! \n --------------------------------------------------------------'); 
 
}); 
 
    
 
$("#button3").click(function() { var p=$("#Unresolved #checkid"); $(p).html("Cx Verified " + '\n' + "The Following sports I play"); 
 
$.each($("input[name='Sport1']:checked"), function() { 
 
$(p).html($(p).html() + '\n' + $(this).val()); }); 
 
$(p).html($(p).html() + '\n --------------------------------------------------------------\n Thanks for contacting us.\n . \n --------------------------------------------------------------'); 
 
}); 
 

 
$("#button4").click(function() { var p=$("#MaybeResolved #checkid"); $(p).html("Cx Verified " + '\n' + "The Following sports I play:"); 
 
$.each($("input[name='Sport1']:checked"), function() { 
 
$(p).html($(p).html() + '\n' + $(this).val()); }); 
 
$(p).html($(p).html() + '\n --------------------------------------------------------------\n Thank you see you again. \n --------------------------------------------------------------'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<!-- bootstrap modal 1 --> 
 

 
<textarea class="form-control" id="checkid" style="min-width: 100%" rows = "20"> 
 
</textarea> 
 
<button class="btn btn-success btn-md" type="button" id="copy-button" data-toggle="tooltip" data-placement="button" title="Copy to Clipboard" onclick = "CopyNotes()">Copy</button> 
 

 
<!-- bootstrap modal 2 --> 
 
<textarea class="form-control" id="checkid" style="min-width: 100%" rows = "20"> 
 
</textarea> 
 
<button class="btn btn-success btn-md" type="button" id="copy-button" data-toggle="tooltip" data-placement="button" title="Copy to Clipboard" onclick = "CopyNotes()">Copy</button> 
 

 
<!-- bootstrap modal 3 --> 
 

 
<textarea class="form-control" id="checkid" style="min-width: 100%" rows = "20"> 
 
</textarea> 
 
<button class="btn btn-success btn-md" type="button" id="copy-button" data-toggle="tooltip" data-placement="button" title="Copy to Clipboard" onclick = "CopyNotes()">Copy</button> 
 

 

 

 
<!---- Divs that get check box ids --> 
 

 

 
<!--- div 1 --> 
 
<form> 
 
    <h3>Select your favorite sports:</h3> 
 
    <label> 
 
    <input type="checkbox" value="football" name="sport"> Football</label> 
 
    <label> 
 
    <input type="checkbox" value="baseball" name="sport"> Baseball</label> 
 
    <label> 
 
    <input type="checkbox" value="cricket" name="sport"> Cricket</label> 
 
    <label> 
 
    <input type="checkbox" value="boxing" name="sport"> Boxing</label> 
 
    <label> 
 
    <input type="checkbox" value="racing" name="sport"> Racing</label> 
 
    <label> 
 
    <input type="checkbox" value="swimming" name="sport"> Swimming</label> 
 
    <br> 
 
    <button type="button">Get Values</button> 
 
</form> 
 
<button id = "button1" type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" >I play these games</button> 
 
    <button id = "button2" type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal2">I dont play these games</button> 
 

 
<!--- div 2--> 
 

 
<form> 
 
    <h3>Select your favorite sports:</h3> 
 
    <label> 
 
    <input type="checkbox" value="football" name="sport1"> Football</label> 
 
    <label> 
 
    <input type="checkbox" value="baseball" name="spor1t"> Baseball</label> 
 
    <label> 
 
    <input type="checkbox" value="cricket" name="sport1"> Cricket</label> 
 
    <label> 
 
    <input type="checkbox" value="boxing" name="sport1"> Boxing</label> 
 
    <label> 
 
    <input type="checkbox" value="racing" name="sport1"> Racing</label> 
 
    <label> 
 
    <input type="checkbox" value="swimming" name="sport1"> Swimming</label> 
 
    <br> 
 
    <button type="button">Get Values</button> 
 
</form> 
 
<button id = "button3" type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" >I play these games</button> 
 
    <button id = "button4" type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal2">I dont play these games</button> 
 

 

 
<!-- div3---> 
 
<!-- other div and so on.---> 
 
<!--- the content is similar but also has addition checkboxes. -->

Answer 1

要素IDのは、ユニークなことになっています。 JavaScriptは1つの要素のみを必要とするため、最初のセレクタにのみアタッチされます。代わりにクラスを使用してください！

Answer 2

まず、IDはすべて固有の名前を持つ必要があります。つまり、IDの使用方法です。

複数のテキストエリアからすべての値を取得する方法に関する質問に答えるには、代わりにクラスをターゲットにすることができます。

var DataSet = document.getElementsByClassName("form-control"); 

DataSet変数には、このようにアクセスできるテキストエリアの値の配列が含まれます。

DataSet[0].value; 
DataSet[1].value; 
DataSet[2].value; 

あなたは3つのテキストエリアと3つのボタンを持っているので、私は、これはあなたがが探しているものであるか分かりません。 IDをユニークに変更すると、独自のコードを使用して、少しずつ繰り返して3つの別々のテキストエリアを個別にターゲティングすることもできます。

Answer 3

私はこの問題を解決しました。私は現在、チェックボックスの値を表示するために1つのモーダルを使用しています。その後、jqueryを使用してテキストエリアをクリアし、ボタンのクリックに基づいて表示します。コピーフィクションにはセレクタが1つしかなく、内容はコピーされます。 これをjquery構文に変換することができます。前もって感謝します。

function CopyNotes() { 
 

 
var DataSet = document.getElementByID('checkid').value; 
 

 
window.clipboardData.setData("TEXT", DataSet); 
 
}