0

所以我有一些单选按钮：

        <input type="radio" name="option" value="GDP" id="GDP_option" checked>GDP
        <input type="radio" name="option" value="Population" id="Population_option" >Population
        <input type="radio" name="option" value="None" id="None_option" > None

我还有一个提交按钮：

 <input type="submit" name="submit" id="submit" onsubmit="changeFormula()">

和一张图片：

 <img src="formula_gdp.gif" name="formula" id="formula">

当按下提交按钮时，我想根据选中的单选按钮将图像 src 更改为其他内容。这是我尝试过的：

 function changeFormula(){
    var radio = document.getElementsByName('option');
    var formula = document.getElementsByName('formula')
    if (radio[1].checked){
        formula.src = "formula_gdp.gif";
    }
    if (radio[2].checked){
        formula.src = "formula_pop.gif";
    }
    if (radio[3].checked){
        formula.src = "formula_none.gif";
    }
}
4

8 回答 8

2

您可以使用 Jquery 来执行此操作，如下所示..

<script type='text/javascript'>
    $(document).ready(function(){
        $("input:radio[name=option]").click(function() {
            var value = $(this).val();
            var image_name;
            if(value == 'GDP'){
                image_name = "formula_gdp.gif";
            }else{
                if(value == 'Population'){
                    image_name = "formula_pop.gif";
                }else{
                    image_name = "formula_none.gif";
                }
            }
             $('#formula').attr('src', image_name);
        });
    });
</script>

只有您需要这三个单选按钮文件和图像标签..不需要提交按钮...

<input type="radio" name="option" value="GDP" id="GDP_option" checked>GDP
<input type="radio" name="option" value="Population" id="Population_option" >Population
<input type="radio" name="option" value="None" id="None_option" > None

<img src="formula_gdp.gif" name="formula" id="formula">

希望它对你有帮助..如果你需要其他的东西......那么你可以告诉我......

于 2013-05-16T10:35:29.040 回答
0

尝试这个

$(document).ready(function() { 
        $("input:radio[name=vf]").change(function() { //name = button group name
            if (this.value == "0") {
                $("#vf").attr( //image file name
                    'src', '/images/onestep/lime/vf.jpg' //image path
                );
            }
            else if (this.value == "8") {
                $("#vf").attr( //image file name
                    'src', '/images/onestep/vf.jpg' //image path
                );
            }
            else {
                $("#vf").attr( //image file name
                    'src', '/images/onestep/vf.jpg'    //image path             
                );
            }
        });
于 2013-05-16T10:10:17.803 回答
0

我认为人们喜欢 jquery，但我需要一些轻量级的东西。

这里是：

<script>
    function changeImage(imgName)
  {
     image = document.getElementById('theimage');
     image.src = imgName;
  }
</script>

这里是单选按钮 html（为了隐私而稍作修改）

<input type="radio" name="reader" value="reader1"  onClick="changeImage('image0.jpg');">
<br>
<input type="radio" name="reader" value="reader1"  onClick="changeImage('image1.jpg');">
<br>
<input type="radio" name="reader" value="reader1"  onClick="changeImage('image2.jpg');">

这是图像：

<img src="image0.jpg" name="theimage" id="theimage">

这对我有用。单击单选按钮，图像发生变化。

于 2013-09-24T12:22:34.130 回答
0

两个变化需要：

1)var formula = document.getElementsByName('formula')改为var formula = document.getElementById('formula');

2) 收音机的索引0不以1, 所以radio[1], radio[2],radio[3]应该是radio[0], radio[1],开头radio[2]

希望有帮助。

于 2013-05-16T10:24:20.547 回答
0

使用if(document.getElementById('element_id').checked)以获得更好的结果。

于 2013-05-16T10:11:49.860 回答
0

添加活动 <input type="submit" name="submit" id="submit" onsubmit="changeFormula(e)">

function changeFormula(e){
    e.stopPropagation();  
    var radio = document.getElementsByName('option');
    var formula = document.getElementsByName('formula')
    if (radio[1].checked){
        formula.src = "formula_gdp.gif";
    }
    if (radio[2].checked){
        formula.src = "formula_pop.gif";
    }
    if (radio[3].checked){
        formula.src = "formula_none.gif";
    }
}

如果你不介意使用 Jquery：

$(document).ready(function() {
    $('#submit').click(function(e) {
        e.preventDefault();
        if($('#GDP_option').is(':checked')) {
 $('#formula').attr('src','formula_gdp.gif') 
}
         if($('#Population_option').is(':checked')) { $('#formula').attr('src','formula_pop.gif') 
}
         if($('#None_option').is(':checked')) { 
$('#formula').attr('src','formula_none.gif') 
}
    })
})
于 2013-05-16T10:14:25.680 回答
0 
<input type="radio" name="option" value="GDP" id="GDP_option" checked>GDP
<input type="radio" name="option" value="Population" id="Population_option">Population
<input type="radio" name="option" value="None" id="None_option">None
<input type="submit" name="submit" id="submit" onclick="changeFormula()">
<img src="formula_gdp.gif" name="formula" id="formula">

    <script type="text/javascript">
        function changeFormula() {
     var radio = document.getElementsByName('option');
     var formula = document.getElementById('formula')
     if (radio[0].checked) {
         formula.src = "formula_gdp.gif";
         alert(formula.src);
     }
     if (radio[1].checked) {
         formula.src = "formula_pop.gif";
         alert(formula.src);
     }
     if (radio[2].checked) {
         formula.src = "formula_none.gif";
         alert(formula.src);
     }
 }
    </script>
于 2013-05-16T10:17:16.057 回答
0

将“提交”更改为按钮以阻止页面重新加载

 <input type="button" value ="Click Me" name="submit" id="submit" onclick="changeFormula()" />

并将其用于您的功能

function changeFormula(){
    var formula = document.getElementById('formula')
    if(document.getElementById('GDP_option').checked)
        formula.src = "formula_gdp.gif";
    if(document.getElementById('Population_option').checked)
        formula.src = "formula_gdp.gif";
    if(document.getElementById('None_option').checked)
        formula.src = "formula_none.gif";
}

工作小提琴： http: //jsfiddle.net/UB2ka/ 没有图像，但你可以在firebug中看到src的变化

于 2013-05-16T10:31:11.893 回答