mercredi 7 juin 2017

Change Image in Specified Div when checkboxes are selected

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