Question

所以我有一些单选按钮：

        <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";
    }
}

Answer 1

您可以使用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">

希望它对你有所帮助..如果你需要另外的东西......那么你可以通知我......

Answer 2

试试这个

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

Answer 3

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

Answer 4

添加活动<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') 
}
    })
})

Answer 5

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

Answer 6

需要进行两项更改：

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

2）广播索引以0而不是1开头，因此radio[1]，radio[2]，radio[3]应为radio[0]，{ {1}}，radio[1]

希望有所帮助。

Answer 7

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

 <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的变化

Answer 8

我认为人们喜欢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">

这对我有用。单击单选按钮，图像会更改。

使用单选按钮更改图像

8 个答案: