Displaying text when checking two checkboxes

(@gilentxo)

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

(@rossmitchell)

7 years, 10 months ago

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

(@rossmitchell)

7 years, 10 months ago

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

(@gilentxo)

7 years, 10 months ago

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/

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

(@rossmitchell)

7 years, 10 months ago

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.

Displaying text when checking two checkboxes

Tags

Topics

Topics with no replies

Non-support topics

Resolved topics

Unresolved topics

All topics