使用單選按鈕更改圖像

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>

僅您將需要這三個單選按鈕字段和Image標簽..不需要Submit按鈕...

<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）radio的索引以0開頭而不是1 ，因此radio[1] ， radio[2] ， radio[3]應該是radio[0] ， radio[1] ， radio[2]

希望能有所幫助。

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/沒有圖像，但是您可以在螢火蟲中看到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">

這對我有用。 單擊單選按鈕，圖像更改。