vendredi 2 juillet 2021

Checkbox drop down content section not working for all checkboxes

Hope you are doing well! I have created 4 checkbox toggle with details but same time only one checkbox toggle is working when I am clicking on another 3 toggle is not working, created 4 script for different checkboxes and change the IDs for each but not working, placed html and javascript code, please help to fix the issue...

<script>
function myFunction() {
  // Get the checkbox
  var checkBox = document.getElementById("chkNIRF");
  // Get the output text
  var Check-content = document.getElementById("text");

  // If the checkbox is checked, display the output text
  if (checkBox.checked == true){
    text.style.display = "block";
  } else {
    text.style.display = "none";
  }
}
</script>
<script>
function myFunction() {
  // Get the checkbox
  var checkBox = document.getElementById("chkNAAC");
  // Get the output text
  var Check-content = document.getElementById("text");

  // If the checkbox is checked, display the output text
  if (checkBox.checked == true){
    text.style.display = "block";
  } else {
    text.style.display = "none";
  }
}
</script>
<script>
function myFunction() {
  // Get the checkbox
  var checkBox = document.getElementById("chkINI");
  // Get the output text
  var Check-content = document.getElementById("text");

  // If the checkbox is checked, display the output text
  if (checkBox.checked == true){
    text.style.display = "block";
  } else {
    text.style.display = "none";
  }
}
</script>
<script>
function myFunction() {
  // Get the checkbox
  var checkBox = document.getElementById("chkIoE");
  // Get the output text
  var Check-content = document.getElementById("text");

  // If the checkbox is checked, display the output text
  if (checkBox.checked == true){
    text.style.display = "block";
  } else {
    text.style.display = "none";
  }
}
</script>
<div class="col-md-12">
                 <div class="checkBox_button">
                    <label><input type="checkbox" id="chkNIRF" value="nirf" onclick="myFunction()"> Text 1</label>
                    <label><input type="checkbox" id="chkNAAC" value="naac" onclick="myFunction()"> Text 2</label>
                    <label><input type="checkbox" id="chkINI" value="ini" onclick="myFunction()">  Text 3</label>
                    <label><input type="checkbox" id="chkIoE" value="ioe" onclick="myFunction()">  Text 4</label>
                </div>
                
                  <label>
                   <p id="text" style="display:none">Checkbox is CHECKED!</p>
                   <p id="text" style="display:none">Checkbox is CHECKED!</p>                  
                   <p id="text" style="display:none">Checkbox is CHECKED!</p>                  
                   <p id="text" style="display:none">Checkbox is CHECKED!</p>
                </div>



Aucun commentaire:

Enregistrer un commentaire