根据两个输入单选按钮显示图像 [英] Display image depending on two input radio buttons
问题描述
我试图根据4个不同名称的单选按钮来显示图片。例如，第一组单选按钮应选择产品型号（两个选项），第二组单选按钮选择颜色（两个选项）。
以下是单选按钮：
< img src = Rack-BK.jpgname =formulaid =formula>
< br>
< input type =radioname =modelvalue =Rackid =rack_option> Rack
< input type =radioname =modelvalue = NoRackid =norack_option> NoRack
< br>< br>
< input type =radioname =colorvalue =Blackid =black_option>黑色
< input type =radioname =colorvalue =Grayid =gray_option>灰色
这是工作原理，但仅用于选择模型，但我还需要添加颜色。
< script type ='text / javascript'>
$（document）.ready（function（）{
$（input：radio [name = model]）。click（function（）{
var value = $（this） .val（）;
var image_name;
if（value =='Rack'）{
image_name =Rack-BK.jpg;
} else {
if（value =='NoRack'）{
image_name =Without-Rack-BK.jpg;
}
}
$（'＃formula '）.attr（'src'，image_name）;
}）;
}）;
这是我尝试做的但不起作用：
< script type ='text / javascript'>
$（document）.ready（function（）{
$（input：radio [name = model]）。click（function（）
$（input：radio [name （）函数（）
{
var value = $（this）.val（）;
var image_name;
if（value =='Rack'）
{
if（value =='Gray'）
{
image_name =Rack-GY.jpg;
}
image_name =Rack-BK.jpg;
}
} else {
if（value =='NoRack'）
{
if（value =='Gray'
{
image_name =Without-Rack-GY.jpg;
}
image_name =Without-Rack-BK.jpg;
}
}
$（'＃formula'）。attr（'src'，image_name）;
}）;
}）;
在这种情况下， ars使用switch语句和'checked'选择器的组合会很有用。
我会把事件处理器放在两个广播组中......在这种情况下，输入：radio [name = model]和input：radio [name = color]（如果页面上有其他单选按钮，则显式定义）。
<然后，处理程序的内部为每个组获取当前选定的值，并在switch语句内部进行处理（更适合处理大量if / else的检查方式，当您只是查看项目）。这意味着如果你添加更多的选项，比如蓝色，黄色等，它将更容易放入并处理这些情况。
TL; DR：这是你的方式可以这样做：
$（input：radio [name = model]，input：radio [name = color]） .click（function（）{//当任何一个单选按钮被点击时，这个处理程序运行。
var modelValue = $（input：radio [name = model]：checked）.val（）; //
var colorValue = $（input：radio [name = color]：checked）。val（）; //查找选中哪个单选按钮
var image_name =; //将图像名称初始化为空白，我们将随时追加
switch（modelValue）{
case'Rack'：
image_name + =Rack; // Rack已被选中，因此在图像的第一部分使用该值
break;
case'NoRack'：
image_name + =没有机架; //没有选择机架，因此使用该值图像的第一部分。
休息;
默认：
image_name + =Rack; //确保有一个默认值，或者可能发生破碎的图像！
休息;
}
switch（colorValue）{
case'Black'：
image_name + =-BK.jpg; //选择了黑色，因此将该值用于图像的最后部分。
休息;
case'Gray'：
image_name + =-GY.jpg; //选择了灰色，因此将该值用于图像的最后部分。
休息;
默认值：
image_name + =-BK.jpg; //确保有一个默认值，或者可能发生破碎的图像！
休息;
}
$（'＃formula'）。attr（'src'，image_name）; //将图像值放入公式图像字段src中。
}）;
I am trying to display an image based on the selection of 4 different radio buttons with 2 different names.
For example the first set of radio buttons should select the product model (two options) and the second set of radio buttons the color (two options).
Here are the radio buttons:
<img src="Rack-BK.jpg" name="formula" id="formula">
<br>
<input type="radio" name="model" value="Rack" id="rack_option">Rack
<input type="radio" name="model" value="NoRack" id="norack_option" >NoRack
<br><br>
<input type="radio" name="color" value="Black" id="black_option" > Black
<input type="radio" name="color" value="Gray" id="gray_option" > Gray
This is what is working but only to select the model but I need the color to be added also.
<script type='text/javascript'>
$(document).ready(function(){
$("input:radio[name=model]").click(function() {
var value = $(this).val();
var image_name;
if(value == 'Rack'){
image_name = "Rack-BK.jpg";
}else{
if(value == 'NoRack'){
image_name = "Without-Rack-BK.jpg";
}
}
$('#formula').attr('src', image_name);
});
});
This is what I tried doing but doesn't work:
<script type='text/javascript'>
$(document).ready(function(){
$("input:radio[name=model]").click(function()
$("input:radio[name=color]").click(function()
{
var value = $(this).val();
var image_name;
if(value == 'Rack')
{
if (value == 'Gray')
{
image_name = "Rack-GY.jpg";
}
image_name = "Rack-BK.jpg";
}
}else{
if(value == 'NoRack')
{
if (value =='Gray'
{
image_name = "Without-Rack-GY.jpg";
}
image_name = "Without-Rack-BK.jpg";
}
}
$('#formula').attr('src', image_name);
});
});
In this case, it appears that a combination of using a switch statement and the 'checked' selector would be of good use.
I would put the event handler on both the radio groups...in this case the input:radio[name=model] and input:radio[name=color] (explicitly defined in case you have any other radio buttons on the page).
Then, inside of the handler get the currently selected value for each group, and do your handling inside of switch statements (better suited for handling a lot of if/else style of checking when you're just looking at the value of the item). This means if you add more options, such as blue, yellow, etc, it will be easier to drop in and handle those cases.
TL;DR: Here's how you could do it:
$("input:radio[name=model], input:radio[name=color]").click(function() { // This handler runs when any of the radio buttons are clicked.
var modelValue = $("input:radio[name=model]:checked").val(); // Find which model radio button is checked.
var colorValue = $("input:radio[name=color]:checked").val(); // Find which color radio button is checked.
var image_name = ""; // Initialize the image name to blank. We will be appending as we go.
switch (modelValue) {
case 'Rack':
image_name += "Rack"; // Rack was selected, so use that value for the first part of the image.
break;
case 'NoRack':
image_name += "Without-Rack"; // No Rack was selected, so use that value for the first part of the image.
break;
default:
image_name += "Rack"; // Make sure there is a default value, or a broken image could occur!
break;
}
switch (colorValue) {
case 'Black':
image_name += "-BK.jpg"; // Black was selected, so use that value for the last part of the image.
break;
case 'Gray':
image_name += "-GY.jpg"; // Gray was selected, so use that value for the last part of the image.
break;
default:
image_name += "-BK.jpg"; // Make sure there is a default value, or a broken image could occur!
break;
}
$('#formula').attr('src', image_name); // Put the image value in the formula image field src.
});
这篇关于根据两个输入单选按钮显示图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
