title: multiple checkbox enabled display text, disabled remove text with javascript?
body: <p>are these 2 functions possible using javascript (onclick checkbox to enabled then display text, onclick to disable and then undisplay text)?</p>
  <ol>
  <li><p>When ticking a checkbox and then display text (optionally editable). When unticking the same checkbox and removing the text?</p>
  </li>
  <li><p>Having a series of such checkboxes and displaying (or undisplaying) each line of text in the order the checkboxes are listed? (eg 1 line at a time in the order of the checkboxes)</p>
  </li>
  </ol>
  <p>** EDIT - code so far, not working for other options... also is it possible to edit all the text in 1 container? ***</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;body&gt;
  &lt;p&gt;Text Maker:&lt;/p&gt;
  &lt;input type=&quot;checkbox&quot; id=&quot;box&quot; onclick=&quot;myFunction()&quot;&gt;
  &lt;label for=&quot;box&quot;&gt;Option 1&lt;/label&gt; 
  &lt;input type=&quot;checkbox&quot; id=&quot;box&quot; onclick=&quot;myFunction()&quot;&gt;
  &lt;label for=&quot;box&quot;&gt;Option 2&lt;/label&gt; 
  &lt;input type=&quot;checkbox&quot; id=&quot;box&quot; onclick=&quot;myFunction()&quot;&gt;
  &lt;label for=&quot;box&quot;&gt;Option 3&lt;/label&gt; 
  
  &lt;p id=&quot;text&quot; style=&quot;display:none&quot;&gt;Display Option 1 settings here.&lt;/p&gt;
  &lt;p id=&quot;text&quot; style=&quot;display:none&quot;&gt;Display Option 2 settings here.&lt;/p&gt;
  &lt;p id=&quot;text&quot; style=&quot;display:none&quot;&gt;Display Option 3 settings here.&lt;/p&gt;
  
  &lt;script&gt;
  function myFunction() {
    var checkBox = document.getElementById(&quot;box&quot;);
    var text = document.getElementById(&quot;text&quot;);
    if (checkBox.checked == true){
      text.style.display = &quot;block&quot;;
    } else {
       text.style.display = &quot;none&quot;;
    }
  }
  &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>