Javascript:显示带有复选框值的图像

2024-01-12

我目前正在使用单选按钮和复选框来在 javascript 的帮助下显示图像。具体来说:我在处理复选框和显示图像时遇到问题。使用单选按钮时,只会显示该类别的一张图像。但对于复选框,需要显示多个图像。例如,用户可以检查夹克和手套的字段,并且将显示两张图片。

如何格式化函数以在单击复选框时显示多张图片?EXAMPLE http://webprolearner2346.zxq.net/bike_calculator/

JS

<script language="JavaScript" type="text/javascript">

function check_value(val, id, type) {     
    var el = document.getElementById("imgBox" + id);
    if (val>0 && val<4) { //will trigger when [1,2,3]
       el.src = "images/"+ type + val + ".jpg";
       el.style.display = "";
  }    
  }      

</script>

HTML

<h2>Choose a bike</h2>
<form name="builder">
    <input type="radio" name="field" value="1" onclick='check_value(1, 1, "bike")'/> KAWASAKI KX 450F<br />
    <input type="radio" name="field" value="2" onclick='check_value(2, 1, "bike")'/> 2010 Yamaha Road Star S<br />
    <input type="radio" name="field" value="3" onclick='check_value(3, 1, "bike")'/> Aprilia RSV4<br />
</form>

<img id="imgBox1" src="#" style="display:none"> 

<h2>Choose a tire</h2>  
<form name="tire">
    <input type="radio" name="field" value="1" onclick='check_value(1, 2, "tire")'/> Michelin Pilot Road 3 Tires<br />
    <input type="radio" name="field" value="2" onclick='check_value(2, 2, "tire")'/> Dunlop Roadsmart Sport-Touring Tires<br />
    <input type="radio" name="field" value="3" onclick='check_value(3, 2, "tire")'/> Pirelli Scorpion Trail Tires<br />
</form>

<img id="imgBox2" src="#" style="display:none">

<h2>Choose Accesories</h2>
<form name="tire">
    <input type="checkbox" name="field" value="1" onclick='check_value(1, 3, "accesories")'/> Chrome Front Plate<br />
    <input type="checkbox" name="field" value="2" onclick='check_value(2, 3, "accesories")'/> Jacket<br />
    <input type="checkbox" name="field" value="3" onclick='check_value(3, 3, "accesories")'/> Gloves            
</form>

<img id="imgBox3" src="#" style="display:none">

<form name="tire">
    <input type="checkbox" name="field" value="1" onclick='check_value(1, 3, "accesories")'/> Chrome Front Plate<br />
    <input type="checkbox" name="field" value="2" onclick='check_value(2, 3, "accesories")'/> Jacket<br />
    <input type="checkbox" name="field" value="3" onclick='check_value(3, 3, "accesories")'/> Gloves            
</form>
<div id='access'></div>    

function check_value(val, id, type) {     
        var img = document.createElement("img");
    img.src = "http://webprolearner2346.zxq.net/bike_calculator/images/"+type+val+".jpg";
    alert(img.src)
    var src = document.getElementById("access");
    src.appendChild(img);
      }   

检查这个演示fiddle http://jsfiddle.net/u37tN/2/

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Javascript:显示带有复选框值的图像 的相关文章

  • AJAX 安全问题

    我希望能够解决一些关于 AJAX 安全性的问题 这是我试图理解的一个场景 假设我正在使用 AJAX 向页面请求一些半敏感材料 例如 我将把用户的 ID 传递给一个 php 文件 并返回一些关于他们自己的信息 现在 是什么阻止人们模拟此 Ja
  • 在 Node.js 中生成带条形码的 pdf

    我在用https github com devongovett pdfkit https github com devongovett pdfkit生成 PDF 文件 我可以简单地使用类似的方法 app get get pdf req re
  • 为什么省略分号会破坏这段代码?

    或者换句话说 为什么分号插入失败 导致下面的代码被破坏 function Foo Foo prototype bar function console log bar lt missing semicolon function Foo pr
  • 在有限的上下文中运行 JS 代码

    我正在尝试奔跑trusted 隔离 上下文中的 JS 代码 基本上想出了这个方法 function limitedEval src context return function with this return eval src call
  • JavaScript 字符串中的脚本标签[重复]

    这个问题在这里已经有答案了 我遇到一个问题 即 JavaScript 中带引号的字符串内有结束脚本标记 并且它正在杀死脚本 我认为这不是预期的行为 可以在这里看到这样的示例 http jsbin com oqepe edit http js
  • Javascript 将对象推送为克隆

    我将 d3 用于交互式网络应用程序 我需要绑定的数据在交互过程中发生变化 并且由 JSON 变量中的一些选定对象组成 为此 我在 JSON 变量上使用了映射 并进行了一些查询来选择适当的对象 对象被推送到列表中 并且该列表被绑定为新数据 我
  • 从选择 onChange 调用 javascript 函数 [重复]

    这个问题在这里已经有答案了 所以我有一个简单的 HTML 选择框和一个 javascript 警报功能 我希望选择框有一个 onchange 事件来调用 javascript 警报函数 这是我到目前为止所拥有的 HTML div Type
  • 判断字符串是否包含有效的javascript代码

    我正在寻找一个C 返回的函数true如果字符串包含有效的 JavaScript 语法 例如 IsValidJavascript alert hello 会回来true but IsValidJavascript alertXXhelloZ
  • onClick 处理程序在每个渲染周期触发

    我有这样的默认状态 this state selectedTab tab1 then 我的渲染方法是这样的 render const selectedTab this state return li tab1 li li tab2 li d
  • 如何将一个数组中的所有项目复制到另一个数组中?

    如何将数组的每个元素 其中元素是对象 复制到另一个数组中 以便它们完全独立 我不想更改一个数组中的元素来影响另一个数组 这里的关键是 数组中的条目是对象 并且 您不希望对一个数组中的对象的修改显示在另一个数组中 这意味着我们不仅需要将对象复
  • 如何通过setTimeout函数定期打印数字?

    var i 0 function counter for i i lt 100 i setTimeout gt console log i 2000 counter 我想以 2 秒的间隔打印 i 但它立即打印 每次打印调用只需要几微秒 为什
  • 检查用户设备的 GPS 是否开启

    我正在使用 jQuery Mobile 和 PHP 开发一个应用程序 我没有使用 Phonegap 或其他框架 我需要找到用户的geolocation 如果用户设备的 GPS 关闭 那么我无法获取位置 现在我需要查找用户设备的 GPS 是否
  • jquery 中的函数返回未定义[重复]

    这个问题在这里已经有答案了 我在 jquery 中调用的函数返回未定义 我检查了该函数 当我对其进行调试时 它返回正确的数据 function addToPlaylist component type add to pl value pl
  • Firefox Addon 中的 JQuery 导致多个警告

    我在 Firefox 插件中使用 jquery 但我不断收到大量警告消息 如下所示 anonymous function does not always return a value System JS WARNING resource g
  • Chrome --app 相当于 Firefox\IE

    我有一个网络应用程序 客户要求单击不同按钮时更改浏览器窗口大小 我发现在那link https stackoverflow com questions 13436855 launch google chrome from the comma
  • Angular2:动态同步http请求

    Goal 发出一系列同步 http 请求并能够将它们作为一个可观察流进行订阅 示例 不工作 let query arr test1 test2 test3 function make request query arr if query a
  • 播放没有音频标签的音频

    是否可以在没有音频标签的情况下仅使用 javascript 播放音频 我通过 tinyMce 编辑器注入脚本 因为我无权访问网站的后端 并且它不支持客户端的音频标签 她只想要当您将鼠标悬停在图像上时发出简单的声音 我已经完成了所有设置 但是
  • Google 地图 API - 地图未显示 - 没有错误

    我正在尝试将地图从 Google API 加载到 div 中 但是 地图未加载 并且没有输出任何错误 这是代码 google maps var geocoder map function codeAddress address geocod
  • React Redux - 在辅助函数中访问现有存储

    我试图在反应组件之外获取存储实例 存储状态 即在单独的辅助函数中 我有我的减速器 我的动作 我在最上面的组件中创建了一个商店 configStore js import createStore from redux import gener
  • 如果 POST 响应仅包含 ID,如何将数据保存到我的 Ember 存储?

    Ember 数据期望我的服务器在每次成功后返回完整的对象POST 但是 我的 API 只返回一种元对象 其中包含id 当 Ember 收到此对象时 记录中的现有数据将被删除 除了id 例如 当我这样做时 var asset App Asse

随机推荐

  • Haskell Parsec,将 oneOf 改编为 [String]

    我正在学习 48 小时内为自己编写一个方案 教程 symbol Parser Char symbol oneOf lt gt 这对于符号来说非常有用 但是如果我有一个关键字列表怎么办 即结构体 整数 oneOf 可以适应列表吗 这就是我想要
  • python side_effect - 方法的模拟行为

    在模拟中 我希望某个函数在测试中返回一个新值 我就是这样做的 Class MyClass my var None def foo self var1 return somevalue def bar self my var foo 1 Cl
  • JDBC 类型没有方言映射:Hibernate 4 和 SQL Server 2012 为 -9 [重复]

    这个问题在这里已经有答案了 我正在使用最新的 Hibernate 4 2 7 SP1 以及实体管理器和验证器等 我正在使用 Microsoft SQL Server 2012 我尝试使用的代码是 StringBuffer sb new St
  • 接收所请求网页的多个 loadFinished 信号

    我收到多个loadFinished当我尝试加载时发出信号QWebPage我不确定是什么导致了这个问题 还有其他几个问题似乎暗示了同一问题 但解决方案对我不起作用 QtWebPage loadFinished 多次调用 https stack
  • Java中可以使用组合而不是继承来实现多态吗?

    我正在学习Java 我知道什么是继承和组合 我见过很多使用继承的多态性的例子 所以我的第一个问题是 使用组合也可以做到同样的事情吗 如果是这样 可以举个什么例子吗 我的第二个问题是 多态性基本上是方法重载和 或方法重写吗 如果是 那为什么
  • 从 Excel 数据模型/Power Query 查询单个数据点(获取和转换数据)

    我正在使用最新版本的 Excel 2016 通过 O365 E3 许可证 并使用 Power Query Get Transform Data 我可以成功创建查询并将其加载到页面 我还成功创建了 Power Pivot 报告 我想从通过 P
  • COUNTIF 相当于 dplyr 总结

    我有一个数据框 列出了参加活动的学生总数 Stu 和每组学生人数 ID Sub ID Stu Sub int int int 1 101 80 NA 2 102 130 NA 3 103 10 NA 4 104 210 20 5 105 1
  • ajax 内容加载后点击不起作用

    如何使 live click function 在 ajax 调用后工作并使用 html data 返回内容 经过 4 个小时的搜索 我想我最好问一下 因为我一无所获 这部分正在工作 ajax type POST url loadAlbum
  • 在 IntelliJ IDEA 中按名称查找包

    我知道 Java 的名字package我想在项目中找到它 如何在 IntelliJ IDEA 中快速完成此操作 有键盘快捷键吗 Open Project View工具窗口 切换到Packages查看模式 单击齿轮图标 启用扁平包装选项 禁用
  • Django 1.6 网址不起作用

    我是 Django 新手 试图弄清楚 Django 中的 url 是如何工作的 我的应用程序urls py from django conf urls import url patterns import views urlpatterns
  • 将 MaterializeCSS 与 aurelia 结合使用

    我想问是否有一步一步的方法来使用或配置 Aurelia 的materializecss 我目前可以运行我的 Aurelia 应用程序 直到教程中我的 index html 看起来像这样
  • 如何将可选列表与上下文操作栏一起使用?

    我在这里阅读新的 Android 设计标准 http developer android com design patterns selection html http developer android com design patter
  • 如果批量使用GTR/LSS运算符

    我有一个越来越大的批处理文件 它使用GTR LSS运营商 问题是if语句只允许我输入某些值 在以下示例中 输入值 2 3 或 4 将返回 值太高 char intb set char points 30 set a limit char p
  • wsdl2java - 警告:无法初始化默认密钥管理器

    在生成 java WSDL 客户端时 我收到这些错误 你能帮我理解这些吗 C Users Administrator workspace apache cxf 3 0 2 bin gt wsdl2javahttps example com
  • 使用 TF-IDF 分数进行文本分类的 KNN

    我有一个 CSV 文件 corpus csv 其中包含语料库中以下格式的分级摘要 文本 Institute Score Abstract UoM 3 0 Hello this is abstract one UoM 3 2 Hello th
  • Android studio 防止粘贴时代码重新格式化[重复]

    这个问题在这里已经有答案了 我已经开始使用 Android Studio 取代 Eclipse 但我无法习惯的一件事是 Studio 如何自动 在某些情况下 重新格式化当前文件中的部分甚至全部代码 其中一种情况是将文本粘贴到我的文件中 当我
  • 正则表达式:+$ VS *$ VS 无

    在正则表达式中 有什么区别 a zA Z and a zA Z 我也可以根本不包括它吗 a zA Z or a zA Z 我在网上查了一下 上面写着 匹配前面的字符一次或多次并且 匹配前面的字符零次或一次 但我不知道这在这种情况下意味着什么
  • 删除按钮处于活动状态(单击)时的阴影

    我有这个 CSS 用于按钮动画和其他 btnliner background url images btnbg png no repeat center 105px Fallback display block text align cen
  • 如何用C#模拟浏览器HTTP POST请求并捕获结果

    假设我们有一个带有搜索输入表单的网页 它通过 HTTP GET 将数据提交到服务器 这意味着服务器通过查询字符串接收搜索数据 用户可以看到 URL 也可以自己初始化此请求 通过 URL 查询字符串 我们都知道 这是问题所在 如果这个网页通过
  • Javascript:显示带有复选框值的图像

    我目前正在使用单选按钮和复选框来在 javascript 的帮助下显示图像 具体来说 我在处理复选框和显示图像时遇到问题 使用单选按钮时 只会显示该类别的一张图像 但对于复选框 需要显示多个图像 例如 用户可以检查夹克和手套的字段 并且将显