multiple checkbox enabled display text, disabled remove text with javascript?-CodePudding

are these 2 functions possible using javascript (onclick checkbox to enabled then display text, onclick to disable and then undisplay text)?

When ticking a checkbox and then display text (optionally editable). When unticking the same checkbox and removing the text?
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)

** EDIT - code so far, not working for other options... also is it possible to edit all the text in 1 container? ***

<!DOCTYPE html>
<html>
<body>
<p>Text Maker:</p>
<input type="checkbox" id="box" onclick="myFunction()">
<label for="box">Option 1</label> 
<input type="checkbox" id="box" onclick="myFunction()">
<label for="box">Option 2</label> 
<input type="checkbox" id="box" onclick="myFunction()">
<label for="box">Option 3</label> 

<p id="text" style="display:none">Display Option 1 settings here.</p>
<p id="text" style="display:none">Display Option 2 settings here.</p>
<p id="text" style="display:none">Display Option 3 settings here.</p>

<script>
function myFunction() {
  var checkBox = document.getElementById("box");
  var text = document.getElementById("text");
  if (checkBox.checked == true){
    text.style.display = "block";
  } else {
     text.style.display = "none";
  }
}
</script>
</body>

CodePudding user response：

You can use the this keyword when calling your function to reference the checkbox that is being clicked, and also pass in the paragraphs id to grab that element.

You can add contenteditable="true" to your paragraph tags to make them editable, if I understand you correctly?

<p>Text Maker:</p>
<input type="checkbox" id="box1" onclick="myFunction(this,'textBox1')">
<label for="box1">Option 1</label> 
<input type="checkbox" id="box2" onclick="myFunction(this,'textBox2')">
<label for="box2">Option 2</label> 
<input type="checkbox" id="box3" onclick="myFunction(this,'textBox3')">
<label for="box3">Option 3</label> 

<p id="textBox1" style="display:none" contenteditable="true">Display Option 1 settings here.</p>
<p id="textBox2" style="display:none">Display Option 2 settings here.</p>
<p id="textBox3" style="display:none">Display Option 3 settings here.</p>

<script>
function myFunction(checkBoxElm,textBoxId) {
 
  let textBox = document.getElementById(textBoxId);
  if (checkBoxElm.checked){
    textBox.style.display = "block";
  } else {
     textBox.style.display = "none";
  }
}
</script>

CodePudding user response：

When having multiple inputs with the same identity class name works better. So you can add a class name to the inputs and then use each function to achieve what you are trying to do.

The following inputs are having the same class name and now you can use each function as follows:

$ = jQuery;
$('.box').each(function(){
            
    $(this).change(function() { // on change of any of the input either checked or unchecked

        if(this.checked){ // if the input is checked
             alert('checked'); // your css
        }else{ // if the input is unchecked
             alert('not checked'); // your css
        }

    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="box">
<label for="box">Option 1</label>
<input type="checkbox" class="box">
<label for="box">Option 2</label>
<input type="checkbox" class="box">