I'm trying to create a page that generates simple custom reports based on the checkboxes a user clicks. On the left side I will have a vertical column of checkboxes. For simplicity's sake, lets say I have two checkboxes labeled "Population" and "Employment".
When a user is interested in seeing employment data they check the "Employment" box and the image file of the data "employment.jpg" will be displayed to the right. If they then uncheck the box, the image will disappear. If they check both boxes, both images will be similarly displayed, one below the other in the order clicked.
I'm am loosely familiar with HTML, and new to Javascript. I've been trying to do this with if statements and document.write but can't keep my checkboxes on the page when the image is generated.
Here's my current code:
<html>
<head>
<script language="javascript" type="text/javascript">
function checker(that) {
if (that.checked) {
document.write("<br /><br /><img src='employment.png'>");
}
}
</script>
</head>
<body>
<form>
<input type="checkbox" name="Box" onclick="checker(this)"> Employment <br />
</form>
</body>
</html>
I'm trying to create a page that generates simple custom reports based on the checkboxes a user clicks. On the left side I will have a vertical column of checkboxes. For simplicity's sake, lets say I have two checkboxes labeled "Population" and "Employment".
When a user is interested in seeing employment data they check the "Employment" box and the image file of the data "employment.jpg" will be displayed to the right. If they then uncheck the box, the image will disappear. If they check both boxes, both images will be similarly displayed, one below the other in the order clicked.
I'm am loosely familiar with HTML, and new to Javascript. I've been trying to do this with if statements and document.write but can't keep my checkboxes on the page when the image is generated.
Here's my current code:
<html>
<head>
<script language="javascript" type="text/javascript">
function checker(that) {
if (that.checked) {
document.write("<br /><br /><img src='employment.png'>");
}
}
</script>
</head>
<body>
<form>
<input type="checkbox" name="Box" onclick="checker(this)"> Employment <br />
</form>
</body>
</html>
- Can you include the code you have so far in your question? – JohnFx Commented Oct 7, 2011 at 18:44
- Yeah, sorry. I was reluctant to include the code, as it is a mismatch of pieces I grabbed from other similar solutions online. – Laban Laban Commented Oct 7, 2011 at 18:50
- The document.write approach is not a great idea because it will add another image every time the checkbox is toggled. It is better to include a hidden image from the get-go and just toggle the visibility. – JohnFx Commented Oct 7, 2011 at 19:02
4 Answers
Reset to default 2Here's a quick example to get you started. You can see it in action here.
function toggleVisibility(id) {
var el = document.getElementById(id);
if (el.style.visibility=="visible") {
el.style.visibility="hidden";
}
else {
el.style.visibility="visible";
}
}<label for="chkemployment">Employment</label>
<input type="checkbox" id="chkemployment" onChange="toggleVisibility('imgemployment');" /><br/>
<label for="chkpopulation">Population</label>
<input type="checkbox" id="chkpopulation" onChange="toggleVisibility('imgpopulation');" />
<hr />
<img id="imgemployment" src="http://www.gravatar./avatar/c0d7be6d99264316574791c1e4ee4cc4?s=32&d=identicon&r=PG" style="visibility:hidden"/>
<img id="imgpopulation" src="http://www.gravatar./avatar/c0d7be6d99264316574791c1e4ee4cc4?s=32&d=identicon&r=PG" style="visibility:hidden" />This is how the solution looks like in AngularJS:
<script src="http://docs-next.angularjs/angular-0.10.1.min.js"
ng:autobind></script>
<p>
<input type="checkbox" name="production" id="production" />
<label for="production">Production</label>
</p>
<p>
<input type="checkbox" name="employment" id="employment" />
<label for="employment">Employment</label>
</p>
<img src="http://i.i../cnwk.1d/i/bto/20071106/OLPC_photo_540x360.jpg"
ng:show="production" />
<img src="http://www.sunriseenterprisesinc./main/Portals/0/EmploymentSmall.jpg"
ng:show="employment" />
You can play with the example here: http://jsfiddle/psyho/nrdnx/
You can handle the change event of the checkboxes. Here's a full example (without images, though): http://jsfiddle/minitech/hsF9s/
Usually people use a framework such as jQuery. It allows you to abstract away from the nitty gritty details and cross-browser pains. Using that, you would do the task you describe like this:
http://jsfiddle/3vQJZ/3/
And here's the code from that working demo:
<input type="radio" name="selectPicture" value="http://i170.photobucket./albums/u277/AmandaisAwesomeQUACK/monkey.gif"/>
<input type="radio" name="selectPicture" value="http://freesmileyface/smiley/animals/monkey-crush2.gif" checked/>
<img id="image" src="http://freesmileyface/smiley/animals/monkey-crush2.gif" alt="image selected by radio buttons"/>
$(document).ready(function(){
$('input[name=selectPicture]').click(function(){
$('#image').attr('src', $('input[name=selectPicture]:checked').val());
});
});