Title: Displaying text when checking two checkboxes
Last modified: June 25, 2018

---

# Displaying text when checking two checkboxes

 *  [gilentxo](https://wordpress.org/support/users/gilentxo/)
 * (@gilentxo)
 * [7 years, 10 months ago](https://wordpress.org/support/topic/displaying-text-when-checking-two-checkboxes/)
 * Hi,
 * I have created a simple set of two checkboxes using html. By checking Checkbox1,
   text1 appears. By checking Checkbox2, text2 is shown. Now, I want to display 
   text3 when BOTH chechboxes are checked, but don’t know how to do it… Any help,
   please?
 *     ```
       <!DOCTYPE html>
       <html>
       <body>
   
       <p>Display some text when the checkbox is checked:</p>
   
       Checkbox1: <input type="checkbox" id="myCheck1"  onclick="myFunction1()">
       Checkbox2: <input type="checkbox" id="myCheck2"  onclick="myFunction2()">
   
       <p id="text1" style="display:none">Strokes!</p>
       <p id="text2" style="display:none">Cuddles!</p>
       <p id="text3" style="display:none">Laughs!</p>
   
       <script>
       function myFunction1() {
           var checkBox = document.getElementById("myCheck1");
           var text = document.getElementById("text1");
           if (checkBox.checked == true){
               text.style.display = "block";
           } else {
              text.style.display = "none";
           }
       }
       </script>
       <script>
       function myFunction2() {
           var checkBox = document.getElementById("myCheck2");
           var text = document.getElementById("text2");
           if (checkBox.checked == true){
               text.style.display = "block";
           } else {
              text.style.display = "none";
           }
       }
       </script>
   
       </body>
       </html>
       ```
   

Viewing 4 replies - 1 through 4 (of 4 total)

 *  [RossMitchell](https://wordpress.org/support/users/rossmitchell/)
 * (@rossmitchell)
 * [7 years, 10 months ago](https://wordpress.org/support/topic/displaying-text-when-checking-two-checkboxes/#post-10432554)
 * This is what I would do:
 *     ```
       <!DOCTYPE html>
       <html>
       <body>
   
       <p>Display some text when the checkbox is checked:</p>
   
       Checkbox1: <input type="checkbox" id="myCheck1"  onclick="myFunction()">
       Checkbox2: <input type="checkbox" id="myCheck2"  onclick="myFunction()">
   
       <p id="text1" style="display:none">Strokes!</p>
       <p id="text2" style="display:none">Cuddles!</p>
       <p id="text3" style="display:none">Laughs!</p>
   
       <script>
       function myFunction() {
           var checkBox1 = document.getElementById("myCheck1");
           var checkBox2 = document.getElementById("myCheck2");
           var text1 = document.getElementById("text1");
           var text2 = document.getElementById("text2");
           var text3 = document.getElementById("text3");
           var dis1, dis2, dis3;
           dis1 = dis2 = dis3 = "none";
           if (checkBox1.checked == true && checkBox2.checked == true){
               dis3  = "block";
           } else {
           if (checkBox1.checked == true){
               dis1 = "block";
           } else 
           if (checkBox2.checked == true){
               dis2 = "block";
           }
           text1.style.display = dis1;
           text2.style.display = dis2;
           text3.style.display = dis3;
       }
       </script>
   
       </body>
       </html>
       ```
   
 *  [RossMitchell](https://wordpress.org/support/users/rossmitchell/)
 * (@rossmitchell)
 * [7 years, 10 months ago](https://wordpress.org/support/topic/displaying-text-when-checking-two-checkboxes/#post-10433261)
 * Sorry, typo detected, an extra {
 *     ```
       <!DOCTYPE html>
       <html>
       <body>
   
       <p>Display some text when the checkbox is checked:</p>
   
       Checkbox1: <input type="checkbox" id="myCheck1"  onclick="myFunction()">
       Checkbox2: <input type="checkbox" id="myCheck2"  onclick="myFunction()">
   
       <p id="text1" style="display:none">Strokes!</p>
       <p id="text2" style="display:none">Cuddles!</p>
       <p id="text3" style="display:none">Laughs!</p>
   
       <script>
       function myFunction() {
           var checkBox1 = document.getElementById("myCheck1");
           var checkBox2 = document.getElementById("myCheck2");
           var text1 = document.getElementById("text1");
           var text2 = document.getElementById("text2");
           var text3 = document.getElementById("text3");
           var dis1, dis2, dis3;
           dis1 = dis2 = dis3 = "none";
           if (checkBox1.checked == true && checkBox2.checked == true){
               dis3  = "block";
           } else
           if (checkBox1.checked == true){
               dis1 = "block";
           } else 
           if (checkBox2.checked == true){
               dis2 = "block";
           }
           text1.style.display = dis1;
           text2.style.display = dis2;
           text3.style.display = dis3;
       }
       </script>
   
       </body>
       </html>
       ```
   
 *  Thread Starter [gilentxo](https://wordpress.org/support/users/gilentxo/)
 * (@gilentxo)
 * [7 years, 10 months ago](https://wordpress.org/support/topic/displaying-text-when-checking-two-checkboxes/#post-10450325)
 * Hey Ross
 * That really worked, thanks a lot!!
 * However, I mistakenly brought here a simplified version of the page, and when
   I uncheck the boxes in descending order leaving box 4 checked, I get two sentences
   instead of just one. I suspect two commands are being applied at the same time.
 * Please, follow the link below and check all the boxes Then, leaving the last 
   one checked, uncheck the 3rd one, the 2nd one and so on to see what I mean:
 * [http://jijaua.byethost14.com/proba/](http://jijaua.byethost14.com/proba/)
 * This is the code:
 *     ```
       <!DOCTYPE html>
       <html>
       <body>
   
       <h4 id="text1" style="display:block; text-align:center">This is sentence 1.</h4>
       <h4 id="text2" style="display:none; text-align:center">This is sentence 2.</h4>
       <h4 id="text3" style="display:none; text-align:center">This is sentence 3.</h4>
       <h4 id="text4" style="display:none; text-align:center">This is sentence 4.</h4>
       <br>
       <h4 id="text5" style="display:none; text-align:center"> This is sentence 1b.</h4>
       <h4 id="text6" style="display:none; text-align:center"> This is sentence 2b.</h4>
       <h4 id="text7" style="display:none; text-align:center"> This is sentence 3b.</h4>
       <h4 id="text8" style="display:none; text-align:center">This is sentence 4b.</h4>
       <p style="padding-left: 90px;"><input type="checkbox" id="myCheck1"  onclick="myFunction1()"> Show sentence 2
       <br>
       <input type="checkbox" id="myCheck2"  disabled onclick="myFunction2()"> Show sentence 3
       <br>
       <input type="checkbox" id="myCheck3"  disabled onclick="myFunction3()"> Show sentence 4
       <br>
       <input type="checkbox" id="myCheck4"  onclick="myFunction4(); myFunction5(); myFunction6(); myFunction7()"> Apply b to any sentence</p>
   
       <script>
       function myFunction1() {
           var text2 = document.getElementById("text2");
           var checkBox = document.getElementById("myCheck1");
           if (checkBox.checked == true){
               text1.style.display = "none";
               text2.style.display = "block";
               document.getElementById("myCheck2").disabled = false;
           } else {
              text1.style.display = "block";
              text2.style.display = "none";
              document.getElementById("myCheck2").disabled = true;
           }
       }
       </script>
       <script>
       function myFunction2() {
           var text2 = document.getElementById("text2");
           var checkBox = document.getElementById("myCheck2");
           if (checkBox.checked == true){
               text3.style.display = "block";
               text2.style.display = "none";
               document.getElementById("myCheck1").disabled = true;
               document.getElementById("myCheck3").disabled = false;
           } else {
              text3.style.display = "none";
              text2.style.display = "block";
              document.getElementById("myCheck1").disabled = false;
              document.getElementById("myCheck3").disabled = true;
           }
       }
       </script>
       <script>
       function myFunction3() {
           var text3 = document.getElementById("text3");
           var text4 = document.getElementById("text4");
           var checkBox = document.getElementById("myCheck3");
           if (checkBox.checked == true){
               text4.style.display = "block";
               text3.style.display = "none";
               document.getElementById("myCheck1").disabled = true;
               document.getElementById("myCheck2").disabled = true;
           } else {
              text4.style.display = "none";
              text3.style.display = "block";
              document.getElementById("myCheck1").disabled = true;
              document.getElementById("myCheck2").disabled = false;
           }
       }
       </script>
       <script>
       function myFunction4() {
           var text1 = document.getElementById("text1");
           var text5 = document.getElementById("text5");
           var checkBox = document.getElementById("myCheck1");
           var checkBox = document.getElementById("myCheck4");
           if (document.getElementById("myCheck1").checked == false)
           if (document.getElementById("myCheck4").checked == true){
               text1.style.display = "none";
               text5.style.display = "block";
           } else {
              text1.style.display = "block";
              text5.style.display = "none";
           }
       }
       </script>
       <script>
       function myFunction5() {
           var text2 = document.getElementById("text2");
           var text3 = document.getElementById("text3"); 
           var text6 = document.getElementById("text6"); 
           var checkBox = document.getElementById("myCheck1");
           var checkBox = document.getElementById("myCheck4");
           if (document.getElementById("myCheck1").checked == true)
           if (document.getElementById("myCheck4").checked == true){
               text1.style.display = "none";
               text2.style.display = "none";
               text3.style.display = "none";
               text6.style.display = "block";
           } else {
              text2.style.display = "block";
              text6.style.display = "none";
           }
       }
       </script>
       <script>
       function myFunction6() {
           var text2 = document.getElementById("text2");
           var text3 = document.getElementById("text3");
           var text6 = document.getElementById("text6");
           var text7 = document.getElementById("text7"); 
           var checkBox = document.getElementById("myCheck2");
           var checkBox = document.getElementById("myCheck3");
           var checkBox = document.getElementById("myCheck4");
           if (document.getElementById("myCheck2").checked == true)
           if (document.getElementById("myCheck4").checked == true){
              text3.style.display = "none";
              text6.style.display = "none";
              text7.style.display = "block";
           } else {
              text2.style.display = "none";
              text3.style.display = "block";
              text4.style.display = "none";
              text6.style.display = "none";
              text7.style.display = "none";
           }
       }
       </script>
       <script>
       function myFunction7() {
           var text4 = document.getElementById("text4"); 
           var text7 = document.getElementById("text7"); 
           var text8 = document.getElementById("text8"); 
           if (document.getElementById("myCheck3").checked == true)
           if (document.getElementById("myCheck4").checked == true){
              text4.style.display = "none";
              text7.style.display = "none";
              text8.style.display = "block";
           } else {
              text3.style.display = "none";
              text4.style.display = "block";
              text8.style.display = "none";
           }
       }
       </script>
       </body>
       </html>
       ```
   
 *  [RossMitchell](https://wordpress.org/support/users/rossmitchell/)
 * (@rossmitchell)
 * [7 years, 10 months ago](https://wordpress.org/support/topic/displaying-text-when-checking-two-checkboxes/#post-10451527)
 * I am sorry that having initially simplified your problem that you lack the ability
   to generalise the solution I provided.
    Among the problems in your code is that
   you are using variables without previously setting the value, such as “text1”
   in your “myFunction1”.

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Displaying text when checking two checkboxes’ is closed to new replies.

## Tags

 * [javascript](https://wordpress.org/support/topic-tag/javascript/)

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 4 replies
 * 2 participants
 * Last reply from: [RossMitchell](https://wordpress.org/support/users/rossmitchell/)
 * Last activity: [7 years, 10 months ago](https://wordpress.org/support/topic/displaying-text-when-checking-two-checkboxes/#post-10451527)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics
