We Keep Coding

How can I toggle the visibility of a picture based on a checkbox state?

If the user checks the checkbox:
<input type="checkbox" value="Door"
I want to show a picture with the picture_door id. Once unchecked, I need to hide it.
I can only use HTML, CSS and JavaScript.
function myFunction() {
var checkBox = document.getElementByValue("Door");
var img = document.getElementById("picture_door");
if (checkBox.checked == true){
img.style.display = "block";
} else {
img.style.display = "none";
}
}
<div>
<input type="checkbox" value="Door" onclick="myFunction()">
</div>

You can do something like:
let img = document.getElementById("picture_door");
let door = document.getElementById("door");
img.src = "";
function myFunction(){
if(door.checked){
img.src = "https://i.ibb.co/mHscrNh/cat.webp";
} else{
img.src = "";
}
}
<div>
<input type="checkbox" value="Door" id="door" onclick="myFunction()">
</div>
<br>
<img src="" id="picture_door" width="120px"/>
Instead of using CSS, you can also unset the src attribute of img using JavaScript to hide the image.

There is no selector called getByElementValue. You should use getElementById
function myFunction() {
var checkBox = document.getElementById("Door");
var label = document.getElementById("label");
var img = document.getElementById("picture_door");
if (!checkBox.checked){
img.style.display = "block";
label.innerText = "Show"
} else {
img.style.display = "none";
label.innerText = "Close"
}
}
<input type="checkbox" id="Door" onclick="myFunction()" >
<label for="Door" id="label"> Toogle </label>
<img id="picture_door" src="https://images.pexels.com/photos/9604813/pexels-photo-9604813.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1">

Either Male or female checkbox selector

Only one will be selected. It properly works when I first select female.
Actually I want to implement that if I select male than female will automatically uncheck again if I check female male will automatically uncheck
function myFunction() {
var checkBox = document.getElementById("myCheck1");
var checkBox2 = document.getElementById("myCheck2");
var text = document.getElementById("text");
var text2 = document.getElementById("text2");
if (checkBox.checked == true){
text.style.display = "block";
text2.style.display = "none";
checkBox2.checked=false;
} else if(checkBox2.checked == true) {
text2.style.display = "block";
text.style.display = "none";
checkBox.checked=false;
}
else{
text.style.display = "none";
text2.style.display = "none";
}
}
<p>Display some text when the checkbox is checked:</p>
<label for="myCheck">Checkbox:</label>
<input type="checkbox" id="myCheck1" onclick="myFunction()">
<input type="checkbox" id="myCheck2" onclick="myFunction()">
<p id="text" style="display:none">Checkbox is CHECKED! for male</p>
<p id="text2" style="display:none">Checkbox is CHECKED! for female</p>

You need to know which checkbox call the function and you could handover the element for checking the actual element.
function myFunction(element) {
var checkBox = document.getElementById("myCheck1");
var checkBox2 = document.getElementById("myCheck2");
var text = document.getElementById("text");
var text2 = document.getElementById("text2");
if (element === checkBox && checkBox.checked) {
text.style.display = "block";
text2.style.display = "none";
checkBox2.checked = false;
return;
}
if (element === checkBox2 && checkBox2.checked) {
text2.style.display = "block";
text.style.display = "none";
checkBox.checked = false;
return;
}
text.style.display = "none";
text2.style.display = "none";
}
<p>Display some text when the checkbox is checked:</p>
<label for="myCheck">Checkbox:</label>
<input type="checkbox" id="myCheck1" onclick="myFunction(this)">
<input type="checkbox" id="myCheck2" onclick="myFunction(this)">
<p id="text" style="display:none">Checkbox is CHECKED! for male</p>
<p id="text2" style="display:none">Checkbox is CHECKED! for female</p>
A slightly different approach
function myFunction(element) {
var boxes = [
[document.getElementById("myCheck1"), document.getElementById("text")],
[document.getElementById("myCheck2"), document.getElementById("text2")]
];
if (element.checked) {
boxes.forEach(([c, t]) => {
if (element === c) {
t.style.display = "block";
} else {
t.style.display = "none";
c.checked = false;
}
});
return;
}
boxes.forEach(([, t]) => t.style.display = "none");
}
<p>Display some text when the checkbox is checked:</p>
<label for="myCheck">Checkbox:</label>
<input type="checkbox" id="myCheck1" onclick="myFunction(this)">
<input type="checkbox" id="myCheck2" onclick="myFunction(this)">
<p id="text" style="display:none">Checkbox is CHECKED! for male</p>
<p id="text2" style="display:none">Checkbox is CHECKED! for female</p>

Not sure why you would use checkbox if only 1 option would be selected, can I suggest using radio inputs instead?
HTML
<form name="example-form" id="example-form">
<div id="radio-buttons">
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>
</div>
<div id="wrapper">
<p id="text--male" class="text hidden">Selected male</p>
<p id="text--female" class="text hidden">Selected female</p>
</div>
</form>
Javascript
const form = document.getElementById('example-form');
const inputs = form.getElementsByTagName('input');
const texts = document.getElementsByClassName('text');
for(let i = 0; i < inputs.length; i++) {
inputs[i].addEventListener('change', function(evt) {
toggleText(evt.target.value);
})
}
function toggleText(tar) {
for(let t = 0; t < texts.length; t++) {
document.getElementsByClassName('text')[t].classList.add('hidden');
}
document.getElementById(`text--${tar}`).classList.remove('hidden')
}

Just wanted to show another, simple way of doing this. Since you have myCheck1 associated with text and myCheck2 associated with text2, I decided to rename text's id to text1. This way, instead of doing numerous if/elseif/else call's, I can control the associated element more easily with element.id.replace('myCheck', 'text'), etc..
Take a look, much simpler:
function myFunction(element) {
document.getElementById("text1").style.display = "none";
document.getElementById("text2").style.display = "none";
if(element.checked != true) {
return true;
}
document.getElementById("myCheck1").checked = false;
document.getElementById("myCheck2").checked = false;
document.getElementById(element.id).checked = true;
document.getElementById(element.id.replace("myCheck", "text")).style.display = "block";
}
<p>Display some text when the checkbox is checked:</p>
<label for="myCheck">Checkbox:</label>
<input type="checkbox" id="myCheck1" onclick="myFunction(this)">
<input type="checkbox" id="myCheck2" onclick="myFunction(this)">
<p id="text1" style="display:none">Checkbox is CHECKED! for male</p>
<p id="text2" style="display:none">Checkbox is CHECKED! for female</p>
This will make it very easy to add a third option: for other, for instance, which would make the above example more inclusive.

Can you use getElementByID to display the content of multiple div wrappers

I am using getElementById to toggle the display of a block in html. The block I am toggling is wrapped in a div like so:
<div id="SunMotion">
<br>
<p>
Toggle the switch to run "24HourCycle.py"
</p>
<label class="switch">
<input id="check3" type="hidden">
<article>
<button class="program" id="check3" id="script1" onclick="check3()" data-fileName="24HourCycle.py">24 Hour Cycle</button>
</article>
</label>
</div>
This is activated using the button:
<button class="button button1" onclick="SunMotion()">
Motion of the Sun
</button>
The button calls the function in javascript which displays the div using its Id:
document.getElementById("SunMotion").style.display = 'none';
function SunMotion() {
var x = document.getElementById("SunMotion");
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
document.getElementById("SunMotion").checked = false;
}
}
This works fine until I try to do the same thing with a different block. with a new function specific to that button:
<button class="button button1" onclick="SunMotion()">
Motion of the Sun
</button>
<button class="button button1" onclick="Hologram()">
Hologram Shapes
</button>
<br>
<div id="Hologram">
<br>
<p>
Toggle the switch to run the Hologram program
</p>
<label class="switch">
<div class="grid-container">
<input id="check12" type="hidden">
<div class="grid-container">
<div class="item1"><button id="check12" id="grd" id="script1" onclick="check12()" data-fileName="red.py">Red</button></div>
<input id="check13" type="hidden">
</label>
</div>
<br>
<div id="SunMotion">
<p>
Toggle the switch to run "24HourCycle.py"
</p>
<label class="switch">
<input id="check3" type="hidden">
<article>
<button class="program" id="check3" id="script1" onclick="check3()" data-fileName="24HourCycle.py">24 Hour Cycle</button>
</article>
</label>
</div>
<br>
<script>
document.getElementById("Hologram").style.display = 'none';
function Hologram() {
var x = document.getElementById("Hologram");
if (x.style.display === 'none') {
x.style.display = 'inline';
} else {
x.style.display = 'none';
document.getElementById("Hologram").checked = false;
}
}
document.getElementById("SunMotion").style.display = 'none';
function SunMotion() {
var x = document.getElementById("SunMotion");
if (x.style.display === 'none') {
x.style.display = 'inline';
} else {
x.style.display = 'none';
document.getElementById("SunMotion").checked = false;
}
}
</script>

if you want use that function on another div, you need to use getElementByClass instead. you can check it Here
or, if you still want to use id, just send that id as parameter.
function SunMotion(id) {
var x = document.getElementById(id);
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
document.getElementById(id).checked = false;
}
}
and, to call that just paste an Id to that function.
<button class="button button1" onclick="SunMotion('SunMotion')">
Motion of the Sun
</button>
Sorry, Typo. you can check my recheck my answer. my Edit is :
onclick="SunMotion('SunMotion')"
Please noted that I changing " by ' in parameter.

Using div.style.display "block" : "none" to hide/unhide based on 2 checkboxes

I have 2 checkboxes that when clicked should hide/unhide divs.
On the initial page load, if fundingAvailable = false the Upload should be hidden. (see image)
When user clicks Special Handling checkbox, the Upload should be hidden. (see image)
When user clicks Override Funding checkbox, and fundingAvailable = false, the Upload should be shown. (see image)
This is what I have so far:
jsp
<INPUT TYPE="CHECKBOX" id="cbOverrideFunding" value="true" onclick="fundingAvailableWarning(<%=fundingAvailable%>)" >
<INPUT TYPE="CHECKBOX" ID="cbSpecialHandling" value="true" onclick="specialHandlingWarning()">
<% if(!fundingAvailable) { %>
<TR>
<TD height="90" valign="top"><BR>
<div id="fundingAvailable" style="display: block">
<b><i>The upload functionality has been disabled because the funding is missing.</i></b>
</div>
<div id="uploadFile">
<INPUT name="File1" type="file" id="File1"/>
<a href="fileUpload()">
<IMG src="../../images/UploadFile.gif" alt="Upload File">
</a>
</div>
<% } %>
<% else { %>
<div id="uploadFile">
<INPUT name="File1" type="file" id="File1"/>
<a href="fileUpload()">
<IMG src="../../images/UploadFile.gif" alt="Upload File">
</a>
</div>
<div id="uploadFileSpecialHandling" style="display: none">
<b><i>The upload functionality has been disabled because of Special Handling.
</i></b>
</div>
<% } %>
javascript
function specialHandlingWarning()
{
if(document.getElementById("fundingAvailable").checked) {
var div = document.getElementById("uploadFile");
div.style.display = div.style.display == "none" ? "block" : "none";
div = document.getElementById("uploadFileSpecialHandling");
div.style.display = div.style.display == "none" ? "block" : "none";
}
}
function fundingAvailableWarning(fundingAvailable)
{
if(!fundingAvailable) {
var div = document.getElementById("uploadFile");
div.style.display = div.style.display == "none" ? "block" : "none";
div = document.getElementById("fundingAvailable");
div.style.display = div.style.display == "none" ? "block" : "none";
}
}
My problem is that these two divs don't play nice together.
If I select Special Handling first, it displays Upload page and hides my Warnings.

I would control everything via CSS, so you can just have to change the class name of your most parent element.

javascript code works individually but fails when used on the same page

each of the 3 code snippets 'on.change();' below work individually, but appears to fail when they are all brought onto the same page. I think this has something to do with the 'this.checked' area - it seems this only reads the last one elem3 any suggestions would be amazing. Seeking JS not jQuery.
var elem = document.getElementById('item1'),
checkBox = document.getElementById('check1');
checkBox.checked = false;
checkBox.onchange = function () {
elem.style.display = this.checked ? 'none' : 'block';
document.getElementById("item2").style.display = "none";
document.getElementById("item3").style.display = "none";
document.getElementById("item4").style.display = "none";
};
checkBox.onchange();
var elem2 = document.getElementById('item2'),
checkBox2 = document.getElementById('check2');
checkBox2.checked = false;
checkBox2.onchange = function () {
elem2.style.display = this.checked ? 'none' : 'block';
document.getElementById("item1").style.display = "none";
document.getElementById("item3").style.display = "none";
document.getElementById("item4").style.display = "none";
};
checkBox2.onchange();
var elem3 = document.getElementById('item3'),
checkBox3 = document.getElementById('check3');
checkBox3.checked = false;
checkBox3.onchange = function () {
elem3.style.display = this.checked ? 'none' : 'block';
document.getElementById("item1").style.display = "none";
document.getElementById("item2").style.display = "none";
document.getElementById("item4").style.display = "none";
};
checkBox3.onchange();
the HTML is below; what is supposed to occur is only divs in relation to the checkboxs should show when a checkbox is selected. So if the first checkbox is selected on, that checkbox and it's wrapper should show, if all 4 are checked, these 4 should show. 2, 3 etc. The ones that are not selected should hide. Again my JS code works individually, but when I want to do all on that same page, they fail.
HTML
<div class="container" id="records" style="background-color:#fff">
<br/>
<div class="row" id="item1">
<div class="col-md-8">
<div class=jumbotron>
<h1>Item 1!</h1>
<p>Item 1 Details for the PDF test.</p>
<!-- <p><a class="btn btn-primary btn-lg" href=# role=button>Learn more</a></p>
-->
<input type="checkbox" id="check1" name="sample[]"/> This is a checkbox1</label>
<br />
</div>
</div>
</div>
<div class="row" id="item2">
<div class="col-md-8">
<div class=jumbotron>
<h1>Item 2!</h1>
<p>Item 2 Details for the PDF test.</p>
<!-- <p><a class="btn btn-primary btn-lg" href=# role=button>Learn more</a></p>
-->
<label><input type="checkbox" id="check2" name="sample[]"/> This is a checkbox1</label><br />
</div>
</div>
</div>
<div class="row" id="item3">
<div class="col-md-8">
<div class=jumbotron>
<h1>Item 3!</h1>
<p>Item 3 Details for the PDF test.</p>
<!-- <p><a class="btn btn-primary btn-lg" href=# role=button>Learn more</a></p>
-->
<label><input type="checkbox" id="check3" name="sample[]"/> This is a checkbox1</label><br />
</div>
</div>
</div>
<div class="row" id="item4">
<div class="col-md-8">
<div class=jumbotron>
<h1>Item 4!</h1>
<p>Item 4 I'm a hidden div!</p>
<!-- <p><a class="btn btn-primary btn-lg" href=# role=button>Learn more</a></p>
-->
<label><input type="checkbox" id="check4" name="sample[]"/> This is a checkbox1</label><br />
</div>
</div>
</div>
</div>
<div class="container1">
<div class="row">
<div class="col-md-8">
<p><a class="btn btn-primary btn-lg download-pdf" href="#" role=button>Download PDF</a></p>
</div>
</div>
</div>

Ok, you question is still unclear, and I will update the answer. But if it is working correctly as in John Bupit's https://jsfiddle.net/wz5sxehn/ - your problem is a simple logical error, not a code error.
Is this JSFiddle working the same as your code?
The problem is you are doing this for every element:
elem.style.display = this.checked ? 'none' : 'block';
document.getElementById("item2").style.display = "none";
document.getElementById("item3").style.display = "none";
document.getElementById("item4").style.display = "none";
For every check-box. One will then hide the other while unhiding itself!
See this running as you want to with minimal changes to the code: https://jsfiddle.net/wz5sxehn/3/
With your HTML: https://jsfiddle.net/wz5sxehn/6/

As others have mentioned, your requirements are not crystal clear. Still, I think this code does what you need.
https://jsfiddle.net/6g0ows2g/
var elem = document.getElementById('item1'),
checkBox = document.getElementById('check1'),
elem2 = document.getElementById('item2'),
checkBox2 = document.getElementById('check2'),
elem3 = document.getElementById('item3'),
checkBox3 = document.getElementById('check3'),
elem4 = document.getElementById('item4'),
checkBox4 = document.getElementById('check4');
function updateOptions() {
document.getElementById("item1").style.display = "block";
document.getElementById("item2").style.display = "block";
document.getElementById("item3").style.display = "block";
document.getElementById("item4").style.display = "block";
}
function toggleBlocks(elem, checkBox) {
updateOptions();
checkBox.checked = false;
elem.style.display = "none";
}
checkBox.onchange = function () {
toggleBlocks(elem, checkBox);
};
checkBox2.onchange = function () {
toggleBlocks(elem2, checkBox2);
};
checkBox3.onchange = function () {
toggleBlocks(elem3, checkBox3);
};
checkBox4.onchange = function () {
toggleBlocks(elem4, checkBox4);
};
As a side note, whenever you find yourself repeating a lot of similar code, group that code into a function and use parameters. I find it helps in removing the clutter that hides syntax errors and logic errors.
updateOptions() can be made more elegant, but I'll leave that up to you. Remember, make it work, make it right, make it fast.

I was playing with your code.
As you asked, I've put the 3 code snippets together on the same page and it worked the way it seems to me it was meant to be in your proposal..
The page is always loaded with 'Item-3' visible, because the 'checkBox3.onchange' initiates the elements this way overwriting any previous configuration made by previous 'onchanges'.
(i.e: and at the end of the script 'checkBox3' is configured as unchecked and the item3 as display=block which makes it visible).
if you want to hide item-3 on the page load just uncomment the last line:
//onload (document.getElementById("item3").style.display = "none");
AFAIK, we should avoid mixing javascript and html this way.
Anyway here it goes the code...
I hope it helps (tested on firefox)
<!DOCTYPE HTML>
<html><head><title>Javascript Test</title>
</head>
<body> <h3>Checkbox test</h3>
<form name="CheckBoxes">
<label for="check1">Checkbox 1</label>
<input type="checkbox" name="check1" Id="check1" tabindex="1"><br><br><br>
<label for="check2">Checkbox 2</label>
<input type="checkbox" name="check2" Id="check2" tabindex="2"><br><br><br>
<label for="check3">Checkbox 3</label>
<input type="checkbox" name="check3" Id="check3" tabindex="3"><br><br><br>
</form>
<p id="item1"> Item-1</p><p id="item2"> Item-2</p><p id="item3"> Item-3</p><p id="item4"> Item-4</p>
<script language="javascript">
var elem = document.getElementById('item1'),
// var elem2 = document.getElementById('item2'),
checkBox = document.getElementById('check1');
checkBox.checked = false;
checkBox.onchange = function () {
elem.style.display = this.checked ? 'none' : 'block';
document.getElementById("item2").style.display = "none";
document.getElementById("item3").style.display = "none";
document.getElementById("item4").style.display = "none";
};
checkBox.onchange();
var elem2 = document.getElementById('item2'),
// var elem2 = document.getElementById('item2'),
checkBox2 = document.getElementById('check2');
checkBox2.checked = false;
checkBox2.onchange = function () {
elem2.style.display = this.checked ? 'none' : 'block';
document.getElementById("item1").style.display = "none";
document.getElementById("item3").style.display = "none";
document.getElementById("item4").style.display = "none";
};
checkBox2.onchange();
var elem3 = document.getElementById('item3'),
// var elem2 = document.getElementById('item2'),
checkBox3 = document.getElementById('check3');
checkBox3.checked = false;
checkBox3.onchange = function () {
elem3.style.display = this.checked ? 'none' : 'block';
document.getElementById("item1").style.display = "none";
document.getElementById("item2").style.display = "none";
document.getElementById("item4").style.display = "none";
};
checkBox3.onchange();
//onload (document.getElementById("item3").style.display = "none");
</script>
</body>
</html>