如何在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() {

  const greaterThanCheckbox = document.getElementById('greater-than-checkbox');

  const lesserThanCheckbox = document.getElementById('lesser-than-checkbox');

  const textareaResult = document.getElementById('textarea-result');

  let greaterThan = greaterThanCheckbox.checked

  let lesserThan = lesserThanCheckbox.checked

  textareaResult.value = JSON.stringify({ 

        'Greater Than': greaterThan,

        'Lesser Than' : lesserThan 

  })

}

小提琴：https : //jsfiddle.net/mtfLrkz8/10