Vanilla JavaScript

Question

我想在选中复选框或按钮时在div中显示图像。我需要能够选择多个框并根据总选择显示不同的图像。

选择矩阵如下：A，B，C，D，AB，AC，AD，BC，BD，ABC，ABD。 C和D不能一起出现。如果没有选择任何内容，我希望它显示图像F.

我也希望使用Bootstrap样式使它们看起来像按钮而不是复选框。

<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>
            <label class="btn btn-default"><input type="checkbox" name="myimages" value="04" id="myimages" onclick="check_value(4)" />Selector4</label>
    </form>
</div>

我在考虑使用这样的脚本：

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;

对于我的图片显示div：<div class="col-6" id="imagetest"></div>

但我老实说不知道从哪里开始。我是JavaScript的新手。

谢谢！

更新

在朋友的帮助下，我们可以进行测试，但我无法让代码正常运行......

            <!DOCTYPE html>
        <html>

        <head>
        <title>Test </title>
        <script src="https://cdnjs.cloudflare.com/.../jquery/1.12.4/jquery.js"></script>
        <script src="https://cdnjs.cloudflare.com/.../jque.../1.12.1/jquery-ui.js"></script>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/.../jqu.../1.12.1/jquery-ui.css" />
        <script src="https://cdnjs.cloudflare.com/.../3.3.6/js/bootstrap.js"></script>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/.../3.3.6/css/bootstrap.css" />
        <style type="text/css">
        input {
        display: none;
        }

        input:checked ~ label {
        background: #00C000;
        border: 1px solid #090;
        color: #fff;
        }

        label {
        background: #ddd;
        -webkit-touch-callout: none;
        /* iOS Safari */
        -webkit-user-select: none;
        /* Chrome/Safari/Opera */
        -khtml-user-select: none;
        /* Konqueror */
        -moz-user-select: none;
        /* Firefox */
        -ms-user-select: none;
        /* Internet Explorer/Edge */
        user-select: none;
        /* Non-prefixed version, currently
        not supported by any browser */
        padding: 10px 30px;
        border: 1px solid #aaa;
        color: #555;
        }
        </style>
        </head>

        <body>
        <div id="form1">
        <form name="test">
        <span><input type="checkbox" id="chk1" onchange="check_value()" data-val="A"><label for="chk1">A</label></span>
        <span><input type="checkbox" id="chk2" onchange="check_value()" data-val="B"><label for="chk2">B</label></span>
        <span><input type="checkbox" id="chk3" onchange="check_value()" data-val="C"><label for="chk3">C</label></span>
        <span><input type="checkbox" id="chk4" onchange="check_value()" data-val="D"><label for="chk4">D</label></span>
        </form>
        </div>
        <div id="imagetest" style="height:200px;width: 200px; border: 5px solid red;"> 
        </div>
        </body>
        <script type="text/javascript">
        function check_value()
        {
        var myVal = '';
        $("input[type=checkbox]").each(function()
        {
        if ($(this).is(':checked'))
        {
        myVal += $(this).data('val');
        }
        });

        alert(myVal);

        var myDiv = $('#imagetest');
        if (myVal == 'A')
        {
        myDiv.css('background-color', 'blue');
        }
        else if (myVal == 'B')
        {
        myDiv.css('background-color', 'green');
        }
        else if (myVal == 'C')
        {
        myDiv.css('background-color', 'grey');
        }
        else if (myVal == 'D')
        {
        myDiv.css('background-color', 'pink');
        }
        else if (myVal == 'AB')
        {
        myDiv.css('background-color', 'orange');
        }
        else if (myVal == 'AC')
        {
        myDiv.css('background-color', 'yellow');
        }
        else if (myVal == 'AD')
        {
        myDiv.css('background-color', 'black');
        }
        else if (myVal == 'BC')
        {
        myDiv.css('background-color', 'lightblue');
        }
        else if (myVal == 'BD')
        {
        myDiv.css('background-color', 'lightgreen');
        }
        else if (myVal == 'ABC')
        {
        myDiv.css('background-color', 'brown');
        }
        else if (myVal == 'ABD')
        {
        myDiv.css('background-color', 'Cyan');
        }
        else
        {
        myDiv.css('background-color', 'white');
        }
        }
        </script>
        <style type="text/css">
        input {
        display: none;
        }

        input:checked ~ label {
        background: #00C000;
        border: 1px solid #090;
        color: #fff;
        }

        label {
        background: #ddd;
        -webkit-touch-callout: none;
        /* iOS Safari */
        -webkit-user-select: none;
        /* Chrome/Safari/Opera */
        -khtml-user-select: none;
        /* Konqueror */
        -moz-user-select: none;
        /* Firefox */
        -ms-user-select: none;
        /* Internet Explorer/Edge */
        user-select: none;
        /* Non-prefixed version, currently
        not supported by any browser */
        padding: 10px 30px;
        border: 1px solid #aaa;
        color: #555;
        }
        </style>

        </html>

我在这里做错了什么..？

Answer 1

好的，我知道你要在单选按钮选择中更改图像。如果要选择多个单选按钮，则必须使用其他类型复选框。

Vanilla JavaScript

这是一个纯粹的javascript代码：

struct

function changeImage(elem) {
  var imageUrl = elem.getAttribute('image');
  document.getElementById('imgview').setAttribute('src', imageUrl);
}
document.querySelector('[value="one"]').click();

简单说明：

您为每个单选按钮指定一个带有链接的属性（相对或绝对是您的选择），然后在函数调用grep中为单击元素的该属性的值并将其设置为图像元素源。

的jQuery

如果您想使用jQuery来完成它，这是一个示例：

<div id="form1">
  <form name='test'>
    <span><input onclick="changeImage(this)" type="radio" image="https://placebear.com/300/200" name="field" value="one">BASE</span>
    <span><input onclick="changeImage(this)" type="radio" image="https://placebear.com/300/300" name="field" value="two">Deep Well </span>
    <span><input onclick="changeImage(this)" type="radio" image="https://placebear.com/200/200" name="field" value="three">Extension </span>
    <span><input onclick="changeImage(this)" type="radio" image="https://placebear.com/200/300" name="field" value="four">Treadmill</span>
    <span><input onclick="changeImage(this)" type="radio" image="https://placebear.com/300/250" name="field" value="five">Stairs </span>
  </form>
</div>
<div id="imagetest">
    <img id="imgview" src="">
</div>

$(document).ready(function() {

  $('#form1 input[name=field][value]').on('click', function(e) {
    var imageUrl = $(this).attr('image');
    $('#imgview').attr('src', imageUrl);
  });

  $('#form1 input[name=field][value=one]').click();

});

编辑：

具有多个图像视图的多重选择

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="form1">
  <form name='test'>
    <span><input type="radio" image="https://placebear.com/300/200" name="field" value="one">BASE</span>
    <span><input type="radio" image="https://placebear.com/300/300" name="field" value="two">Deep Well </span>
    <span><input type="radio" image="https://placebear.com/200/200" name="field" value="three">Extension </span>
    <span><input type="radio" image="https://placebear.com/200/300" name="field" value="four">Treadmill</span>
    <span><input type="radio" image="https://placebear.com/300/250" name="field" value="five">Stairs </span>
  </form>
</div>
<div id="imagetest">
  <img id="imgview" src="">
</div>

$(document).ready(function() {

  $('#form1 input[name=field][value]').on('click', function(e) {
    var imageUrl = $(this).attr('image');
    var fieldValue = $(this).val();
    var idImage = 'image_' + fieldValue;
    if ($(this).is(':checked')) {
      $('#imagetest').append('<img src="' + imageUrl + '" id="' + idImage + '">');
    } else {
			$('#'+idImage).remove();
    }

  });

  $('#form1 input[name=field][value=one]').click();

});

选中复选框时，更改指定div中的图像

1 个答案:

Vanilla JavaScript

的jQuery