使用单选按钮复制文本区域的内容答案

【问题标题】：Copy the content of text-area using radio button使用单选按钮复制文本区域的内容
【发布时间】：2021-11-05 05:02:35
【问题描述】：

我想使用单选按钮将当前地址复制到永久地址。我正在使用 Onclick 事件，但它不起作用。这是我的代码。

$(function() {
  $('input[type="radio"][name="perm_address"]').click(function() {
    $('#permanent_add').val() = ($('#current-address').val());
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3>Address details</h3>
<input type="radio" id="html" name="perm_address" value="HTML" onclick="function()">
<label for="html">Permanent Address same as present address</label><br>
<div class="row">
  <div class="form-group">
    <div class="col-md-8 col-sm-12 col-xs-12">
      <label for="Present"><h4>Present Address</h4></label>
      <%= user_detail.text_area :contact_address, class: "form-control", :required => true,id:'current-address' %>
    </div>
  </div>
  <div class="row">
    <div class="form-group">
      <div class="col-md-8 col-sm-12 col-xs-12">
        <label for="permanent_address"><h4>Permanent Address</h4></label>
        <%= user_detail.text_area :permanent_address, class: "form-control", :required => true ,id:'permanent_add'%>
      </div>
    </div>

【问题讨论】：

应该是$('#permanent_add').val($('#current-address').val());。 .val() 获取值，.val("something") 设置值
题外话：你为什么要使用收音机？没有其他收音机就无法取消设置，因此如果您复制然后编辑原件，则无法再次复制（因为已经“检查”）。使用<button type="button"
感谢@CarstenLøvboAndersen

标签： javascript html jquery ruby-on-rails

【解决方案1】：

如果你想继续你开始的路径，我修复了你代码中的几个错误。

您的 html 中不需要 onclick 处理程序。我删除了它。
缺少 2 个 </div> 结束标记。
一些id 名称不正确。
$('#permanent_add').val() = ($('#current-address').val()); 是无效的 jQuery。更正为$('#permanent_address').val($('#current_address').val());

正如 cmets 中所指出的，此处使用单选按钮是不切实际的。复选框或按钮会是更好的选择。

$(function() {
  $('input[type="radio"][name="perm_address"]').click(function() {
    $('#permanent_address').val($('#current_address').val());
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3>Address details</h3>
<input type="radio" id="html" name="perm_address" value="HTML" />
<label for="html">Permanent Address same as present address</label><br>
<div class="row">
  <div class="form-group">
    <div class="col-md-8 col-sm-12 col-xs-12">
      <label for="current_address"><h4>Present Address</h4></label>
      <input type="text" id="current_address" />
    </div>
  </div>
  <div class="row">
    <div class="form-group">
      <div class="col-md-8 col-sm-12 col-xs-12">
        <label for="permanent_address"><h4>Permanent Address</h4></label>
        <input type="text" id="permanent_address" />
      </div>
    </div>
  </div>
</div>

【讨论】：

谢谢@max。我删除了。

【解决方案2】：

创建一个将两个输入链接在一起的通用按钮非常简单：

$(function(){
  $('.copypasta').on('click', function(e){
    e.preventDefault();
    const elements = this.form.elements,
          source = elements[this.dataset.source],
          target = elements[this.dataset.target];
    if (!source || !target) {
      throw 'source or target cannot be found in the form';
    }
    target.value = source.value;
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <button class="copypasta" data-source="foo" data-target="bar">Copy foo to bar</button>
  <div>
    <input name="foo" type="text" value="hello world" />
  </div>
  <div>
    <input name="bar" type="text" />
  </div>
</form>

这通过简单地使用浏览器提供的表单 API 来工作，它可以很容易地通过名称找到相同表单中的其他输入。

配置（名称）通过数据属性提供。

【讨论】：