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

标签 javascript jquery html twitter-bootstrap checkbox

我想在选中复选框或按钮时在 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 还很陌生。

谢谢!

更新

在 friend 的帮助下，我们能够进行测试，但我无法让代码正常工作...

            <!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>

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

最佳答案

好的，我知道你想在单选按钮选择中更改图像。如果你想选择多个单选按钮，你必须使用另一种类型，复选框。

原生 JavaScript

这是一个普通的纯 javascript，代码:

function changeImage(elem) {
  var imageUrl = elem.getAttribute('image');
  document.getElementById('imgview').setAttribute('src', imageUrl);
}
document.querySelector('[value="one"]').click();
<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>

简单解释:

您为每个单选按钮赋予一个带有链接的属性(您可以选择相对或绝对)，然后在函数调用 grep 中为单击的元素获取该属性的值，并将其设置为图像元素源。

jQuery

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

$(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>

编辑:

具有多个 ImageView 的多项选择

$(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();

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

关于javascript - 选中复选框时更改指定 div 中的图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44419975/

上一篇：css - 使嵌入式 SVG 比例适合父容器

下一篇：javascript - POST 表单操作无法正常工作 [Django]

相关文章：

javascript - 使用 JQuery 显示警报后防止关注下一个表单元素

javascript - CSS水平表格单元格间距: how?

javascript - 为什么我不能用 javascript 将一系列 <li> 包装在标签中？

html - 菜单中的子菜单显示在带有母版页的网页形式的内容下，如何解决这个问题

javascript - 如何将链接传递给express.js中的req.flash()

javascript - 如何在 JavaScript 中检索元属性 og 的内容？

javascript - 适合屏幕底部/顶部的菜单

jQuery 淡入/淡出过渡不可见(自从将 Firefox 更新到 34)

javascript - 如何获取 "j"的值以供在函数外部使用？

javascript - 为 Sublime Text for JavaScript 添加语法高亮

©2024 IT工具网  联系我们