I am wanting to display an image in a div when checkboxes or buttons are selected. I need to to be able to select multiple boxes and display a different image based on the total selection.
The selection matrix would be as follows: A, B, C, D, AB, AC, AD, BC, BD, ABC, ABD. C and D cannot appear together. When Nothing is selected I want it to display image F.
I was also hoping to use Bootstrap styling to make them look like Buttons not checkboxes:
<div><form name="test1">
<div data-toggle="buttons" class="btn-group itemcontent">
<label class="btn btn-default"><input type="checkbox" name="myimages" value="01" id="myimages" onclick="check_value(1)" />Selector1</label>
<label class="btn btn-default"><input type="checkbox" name="myimages" value="02" id="myimages" onclick="check_value(2)" />Selector2</label>
<label class="btn btn-default"><input type="checkbox" name="myimages" value="03" id="myimages" onclick="check_value(3)" />Selector3</label>
Selector4
I was thinking of using a script like this:
function check_value(fieldvalue)
{
switch(fieldvalue)
{
case 1:
document.getElementById("imagetest").innerHTML = "<img src='img/600/600T_W_Base_Model.png'>";
break;
case 2:
document.getElementById("imagetest").innerHTML = "<img src='img/600/600T_W_DW.png'>";
break;
For my image display div:<div class="col-6" id="imagetest"></div>
But I'm honestly not sure where to go from here. I'm VERY new to Javascript.
Thank you!
Aucun commentaire:
Enregistrer un commentaire