Question

如上图所示。我有一组单选按钮，如图所示。我的客户想看图片而不是单选按钮。他还想要的是当用户点击图像（单选按钮）时，该按钮的值应该显示在下面的textarea字段中。因此，用户可以看到所选单选按钮的值，并且还他应该能够在单击保存之前对其进行编辑。因此，用户可以看到他选择的内容，也可以在保存之前输入。

我正在使用Jquery。因此，当用户单击单选按钮时，我捕获用户单击的文本的值并保存在变量中。比我将textarea字段的值设置为该变量。

一切正常，但问题是当用户选择某些内容并输入内容时，如果他点击另一张图片，则该字段不会清除。

问题：我如何复制点击图像的点击值并在字段中显示，并允许用户输入，如果他点击另一个图像，该字段应该变得清晰。

这是我的代码

HTML

<div class="text-center">
    <h4>Select reason</h4>
             <form id="timer-reason">
                <div class="row">
                 <div class="col-md-12">
              <?php
                    while ($row = mysqli_fetch_assoc($timer_reasons)) {
                ?>
                  <label class="select-reason" value="<?php echo $row['description_tmr']; ?>" id="<?php echo $row['id_tmr']; ?>">
                    <input type="hidden" id="reason-id" value="<?php echo $row['id_tmr']; ?>">
                    <input type="radio" name="ReasonSelect" value="<?php echo $row['description_tmr']; ?>" />
                    <img src="../../css/timer-reasons/<?php echo $row['image_tmr']; ?>" style="width:30%;" class="TimerReason">
                  </label>
                  <?php 
                     }
                    ?>
                     <div class="form-group">

                    <textarea class="form-control" id="reason" value="" rows="2"></textarea>
                 </div>

             </div>
        </div>


</div>

JQUERY

   $('input:radio').click(function() {

   var reasonvalue=$(this).attr("value");
   $("#reason").text(reasonvalue);


  });

Answer 1

这是由于浏览器如何显示textarea的值，该值是通过在开始/结束标记之间放置文本，设置innerText / textContent

<textarea>Value between tags</textarea>

value属性提供的值。

<textarea id="reason"></textarea>
document.getElementById('reason').value = "Value by property";

您可以多次设置innerText / textContent，但只要它获得set value属性，这也会在用户开始输入时发生，更改innerText / textContent将不再更改显示可见文字。实际属性虽然有所改变。

＆＃13;

var reasonTextarea = document.getElementById('reason');

var tcBtn = document.getElementById('tcTest');
var tcBtn2 = document.getElementById('tcTest2');
var propBtn = document.getElementById('propTest');

tcBtn.addEventListener('click',function(){
  reason.textContent = "textContent set";
});

tcBtn2.addEventListener('click',function(){
  reason.textContent = "textContent set again";
});

propBtn.addEventListener('click',function(){
  reason.value = "value property set, now try typing something and/or hitting the change by textContent button again.";
});

＆＃13;

<textarea id="reason" rows=5 cols=40>Test value 1</textarea>

<button id="tcTest">Click to change value by textContent</button>
<button id="tcTest2">Click to change value by textContent again</button>

<button id="propTest">Click to change value by property</button>

＆＃13;

这就是你的代码所发生的事情，你使用jQuery的.text（）方法来改变textarea的textContent。只要您从未设置value属性或用户从未在textarea中键入，这将有效。

要解决此问题，您应该通过更改value属性而不是textContent属性来更改textarea的值。

jQuery('#reason').val('New value');

Answer 2

尝试以下代码。它应该工作

$('input[type=radio]').click(function() {
  var reasonvalue = $(this).attr("value");
  $("#reason").val(reasonvalue);
});

Answer 3

试试这个：

$(function () {
  $('[name=ReasonSelect]') // bind event on all inputs with name RadioSelect
   .on('change', function() { // on a change execute the function
     var v = $('[name=ReasonSelect]:checked'); // get the selected value
     $("#reason").val( v ); // put the value in #reason.
  });
});

在输入字段

3 个答案: