Combined checkbox selection (html)

Combined checkbox selection (html)
0.0 0

#1

Hi there,

I’m new to the forum and to HTML in general.

I’m creating a set of checkboxes each of which will show a different text.

The problem comes when I try to use a combination of checkboxes to show a given text.

For example, I have created:

Checkbox 1
Checkbox 2
Checkbox 3
Checkbox 4

So I will get 4 texts. But I want to get a fifth text by checking both Checbox 2 and Checkbox 4 combined. Is that possible? That text would be the one with ID “text5” in the code below.

This is the code I’m using. Thanks a lot!

<!DOCTYPE html>
<html>
<body>

<p>Checkbox options</p>

<hr />
<h4 style="text-align: center;"><em>This is the example sentence</em>.</h4>

<p id="text1" style="display:block; visibility:hidden; text-align:center">this is non-visible text to keep a space</p>
<p id="text2" style="display:none; text-align:center">This is the example sentence 1.</p>
<p id="text3" style="display:none; text-align:center">This is the example sentence 2.</p>
<p id="text4" style="display:none; text-align:center">This is the example sentence 3.</p>
<br><br><br>
<p id="text5" style="display:none; text-align:center">This is the example sentence 4.</p>
<p id="text6" style="display:none; text-align:center">This is the example sentence 5.</p>
1. <input type="checkbox" id="myCheck1"  onclick="myFunction1()"> One
<br>
2. <input type="checkbox" id="myCheck2"  disabled onclick="myFunction2()"> Two
<br>
3. <input type="checkbox" id="myCheck3"  disabled onclick="myFunction3()"> Three
<br>
4. <input type="checkbox" id="myCheck4"  disabled onclick="myFunction4()"> Four


<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 text3 = document.getElementById("text3");
    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;
        document.getElementById("myCheck4").disabled = false;
    } else {
       text3.style.display = "none";
       text2.style.display = "block";
       document.getElementById("myCheck1").disabled = false;
       document.getElementById("myCheck3").disabled = true;
       document.getElementById("myCheck4").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 text5 = document.getElementById("text5");
    var text6 = document.getElementById("text6");
    var checkBox = document.getElementById("myCheck4");
    if (checkBox.checked == true){
        text3.style.display = "none";
        text4.style.display = "none";
        text6.style.display = "block";
        document.getElementById("myCheck1").disabled = true;
        document.getElementById("myCheck2").disabled = true;
    } else {
       text3.style.display = "none";
       text4.style.display = "block";
       text6.style.display = "none";
       document.getElementById("myCheck1").disabled = true;
       document.getElementById("myCheck2").disabled = true;
    }
}
</script>

</body>
</html>


#2

I believe what you described is possible using something called display: none;
Look it up on google and then combine it with a css selector to detect the checked boxes.


#3

Hi hbar1st

Thaks for your help. As you can see in the code, I profusely used display:none.


#4

I’m not sure i understand what your followup question is. Are you saying that your code doesn’t hide the fifth text? Or are you saying it doesn’t display it when checkbox2+4 are checked?

If you are asking the second question, i would say, where is the code that should display it? I checked all available code above for the word text5 and i only see this:

Which is certainly not enough…

Pls clarify the concern.
./H.B.


#5

Hey, thanks for the info!

I want to be able to check any one of boxes 1, 2 or 3 combined with box 4 either checked or unchecked, to get different sentences. I’ve made it work in ascending order, but when I uncheck the boxes back 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/

In order to be correct, only one sentence should be displayed each time.

This is the code I’ve used:

<!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>

#6

if I have understood you, (and it hasn’t been easy from your original description!), you want the checkbox called myCheck4 to modify the displayed sentence to make it say “This is sentence nb” where n is a number 1-3 representing which checkbox was checked?

In this case, why do you have so many functions? You just need one.

Here’s the psuedocode for the function.

function myFunction() {
    //check which checkboxes are currently checked
   // based on that, decide which sentence to display
   var check1 = document.getElementById("myCheck1").checked;
   var check2 = etc.
    var check3 = etc.
    var check4 = etc.
       /** perform checks to determine which text to display  */         
}