Javascript: Displaying images with check boxes values

I am currently working with radio buttons and check boxes to display images with the help of javascript. To be specific: I am running into an issue when working check boxes and displaying the images. With the radio buttons only one image will be display for that category. But with checkboxes more than one image need to be display. For example, a user can check field for jacket and glove and both pictures will be display.

How can I format the function to display multiple pictures when check boxes are clicked? EXAMPLE

JS

<script language="JavaScript" type="text/javascript">

function check_value(val, id, type) {     
    var el = document.getElementById("imgBox" + id);
    if (val>0 && val<4) { //will trigger when [1,2,3]
       el.src = "images/"+ type + val + ".jpg";
       el.style.display = "";
  }    
  }      

</script>

HTML

<h2>Choose a bike</h2>
<form name="builder">
    <input type="radio" name="field" value="1" onclick='check_value(1, 1, "bike")'/> KAWASAKI KX 450F<br />
    <input type="radio" name="field" value="2" onclick='check_value(2, 1, "bike")'/> 2010 Yamaha Road Star S<br />
    <input type="radio" name="field" value="3" onclick='check_value(3, 1, "bike")'/> Aprilia RSV4<br />
</form>

<img id="imgBox1" src="#" style="display:none"> 

<h2>Choose a tire</h2>  
<form name="tire">
    <input type="radio" name="field" value="1" onclick='check_value(1, 2, "tire")'/> Michelin Pilot Road 3 Tires<br />
    <input type="radio" name="field" value="2" onclick='check_value(2, 2, "tire")'/> Dunlop Roadsmart Sport-Touring Tires<br />
    <input type="radio" name="field" value="3" onclick='check_value(3, 2, "tire")'/> Pirelli Scorpion Trail Tires<br />
</form>

<img id="imgBox2" src="#" style="display:none">

<h2>Choose Accesories</h2>
<form name="tire">
    <input type="checkbox" name="field" value="1" onclick='check_value(1, 3, "accesories")'/> Chrome Front Plate<br />
    <input type="checkbox" name="field" value="2" onclick='check_value(2, 3, "accesories")'/> Jacket<br />
    <input type="checkbox" name="field" value="3" onclick='check_value(3, 3, "accesories")'/> Gloves            
</form>

<img id="imgBox3" src="#" style="display:none">

Answers


Add two more image boxes:

<img id="imgBox3a" src="#" style="display:none">
<img id="imgBox3b" src="#" style="display:none">
<img id="imgBox3c" src="#" style="display:none">

Then onclick call:

check_value(1, "3a", "accessories");
check_value(2, "3b", "accessories");
check_value(3, "3c", "accessories");

Need Your Help

Sending PDF file from webserver (php) to client PC for printing

php pdf printing webserver

I have sushi online webshop, when orders are made i would like to have a PDF file sendt from the webserver to a computer in the restaurant that automaticly prints the document.

What's the best procedure for clearing out unwanted files in an SVN repo?

svn

I've got some garbage in a WordPress plugin repo I have that I need to get rid of. I'm new to SVN and I'm apparently missing something here.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.