php - 复选框 - 选中添加文本，取消选中删除文本区域中的原始文本

Question

<script language="javascript" type="text/javascript">

function moveNumbers(num) { 
   var txt=document.getElementById("result").value; 
   txt=txt + num; 
   document.getElementById("result").value=txt; 
} 
</script>

<textarea id="result" name="image_id" rows="8" cols="11" readonly>

</textarea>
<tr>

    <?php
        $path = "photos/";
        $dir_handle = @opendir($path) or die("Unable to open folder");
        echo "<table height='500px'width='800px'align='center'border='1'>";
        echo "<tr>";
        while (false !== ($file = readdir($dir_handle))) {

          if($file == "index.php")
          continue;
          if($file == ".")
          continue;
          if($file == "..")
          continue;

          echo ($x % 6 == 0) ? "</tr><tr>" : "";
          echo "<td><input type='checkbox' name='add' value='$file'             
          onclick='moveNumbers(this.value)'>
          <img src='photos/$file'alt='$file' style='height:auto;width:50%;'alt='$file'>
          <br>
          $file
          </td>";
          $x++;
       }
       echo "</tr>";
       echo "</table>";
       closedir($dir_handle);
   ?>

大家好，复选框有问题。点击复选框，文本出现在文本区域没有问题。我一直在试图弄清楚当您取消选中复选框时如何删除文本。EG 选中 -> 输入文本 123，取消选中 -> 删除测试 123。干杯。

Answer 1

因此，您需要不同的活动，具体取决于您的文本框是被选中还是未选中。目前，只要单击复选框，您就会调用一个方法，因此现在您需要查看复选框被单击时的状态。给你的复选框一个 ID，然后换掉你的 Javascript。

<script language="javascript" type="text/javascript">

function moveNumbers(num) { 
 if(document.getElementById("checkBoxId").checked){
  var txt=document.getElementById("result").value; 
  txt=txt + num; 
  document.getElementById("result").value=txt; 
 }
 else{
 document.getElementById("result").value=txt="";
 }
} 

</script>

Answer 2

只需添加 jquery，这将对您有所帮助..

<script type='text/javascript'>        
$(document).ready(function(){
    $('#textCheck').change(function(){
        if($('#textCheck').attr('checked'))
        {
            $('#myTextArea').val($('#textinput').val());
        }
        else
        {
            $('#myTextArea').val('');
        }
    });
});
</script>
<input type = "text" name = 'textinput' id = 'textinput' />
<textarea name = 'myTextArea' id = 'myTextArea'></textarea>
<input type="checkbox" name='textChck' id='textCheck' />