使用javascript或jquery将具有相同ID的多个文本区域内容复制到剪贴板

Question

我有3个引导模式，单独的textareas在textareas中显示相应模式的textarea中的复选框值。

（我有一个jQuery捕获复选框值，并把它们在各自的texareas。所以它是工作的罚款）

但我在打开的onclick甚至每个模式将拷贝按钮指向函数将相应的textarea内容复制到剪贴板。但只有第一个模态值被复制。当我点击其他模式上的复制按钮时，这些值不会被复制。有什么，我失踪了。

textarea正在从div中捕获checkid。所以textarea的id为checkid。复制按钮被激活以复制textarea内容。但是第一个模式的复制按钮不起作用，而不是其他模式。

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仅附加到第一个选择器，因为它只需要一个元素。改为使用类！

Answer 2

首先，您的ID应该都有唯一的名称，这就是ID的使用方式。

要回答你如何从多个textareas获取所有值的问题，你可以改为定位你的班级。

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

用这个你的DataSet变量将包含一个你可以像这样访问的textarea值的数组。

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

虽然你有3个textareas和3个按钮，但我不确定这是你在找什么。但改变你的ID是独一无二的，你的原始代码也可以用来单独定位你的3个独立的textareas，并重复一次。

Answer 3

我解决了这个问题。我现在使用一种模式显示复选框值。然后使用jquery清除textarea并根据按钮点击进行显示。现在复制小说只有一个选择器并且内容被复制。 现在有人可以将其转换为jQuery语法。提前致谢。

function CopyNotes() { 
 

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

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