Question

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

（我有一个jquery捕获复选框值并将它们放在相应的texareas中。所以它工作正常）

但是我在每个模态中放了一个复制按钮，打开一个onclick，甚至指向一个函数将相应的textarea内容复制到剪贴板。但只复制了第一个模态值。当我单击其他模态上的复制按钮时，不会复制这些值。有什么东西我不知道。

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

＆＃13;

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 --------------------------------------------------------------'); 
 });	

//Touch does not respond	
$("#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 --------------------------------------------------------------'); 
 });

＆＃13;

<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. -->

＆＃13;

Answer 1

元素id应该是唯一的。 JavaScript仅附加到第一个选择器，因为它只需要一个元素。改用class！

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);
}

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

3 个答案: