【发布时间】：2017-11-09 05:44:40
【问题描述】：
我想在选中复选框或按钮时在 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>
我在这里做错什么了..？
【问题讨论】：
-
你能提供一个可行的例子吗？
标签： javascript jquery html twitter-bootstrap checkbox