如何在html文本区域显示动态值

Question

我有这样的要求：

<div class="card-header">Data</div>

  <ul class="list-group">

      <li class="list-group-item">

         <div class="custom-control custom-checkbox">

          <input class="custom-control-input" type="checkbox" disabled>

             <label class="custom-control-label ">Greater Than

          </label>

         </div>

      </li>

      <li class="list-group-item">

         <div class="custom-control custom-checkbox">

          <input class="custom-control-input" type="checkbox" disabled>

             <label class="custom-control-label ">Lesser Than

          </label>

         </div>

      </li>

  </ul>

如果用户选择大于我需要在同一页面的文本区域中像这样显示，如下所示：

    { 

      'Greater Than':"Yes",

      'Lesser Than' : "No" 

     }

Answer 1

你在寻找这样的东西吗？document.getElementById("greater-than-checkbox").addEventListener("click", myFunction);document.getElementById("lesser-than-checkbox").addEventListener("click", myFunction);function myFunction() {&nbsp; const greaterThanCheckbox = document.getElementById('greater-than-checkbox');&nbsp; const lesserThanCheckbox = document.getElementById('lesser-than-checkbox');&nbsp; const textareaResult = document.getElementById('textarea-result');&nbsp; let greaterThan = greaterThanCheckbox.checked&nbsp; let lesserThan = lesserThanCheckbox.checked&nbsp; textareaResult.value = JSON.stringify({&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; 'Greater Than': greaterThan,&nbsp; &nbsp; &nbsp; &nbsp; 'Lesser Than' : lesserThan&nbsp;&nbsp; })}小提琴：https : //jsfiddle.net/mtfLrkz8/10