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>

これらの 3 つのラジオ ボタン フィールドとイメージ タグが必要なのはあなただけです。送信ボタンは不要です。

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

2 つの変更が必要です。

1)var formula = document.getElementsByName('formula')に変更var formula = document.getElementById('formula');

02) ラジオのインデックスは ではなく で始まる1のでradio[1]、radio[2],は, , のradio[3]はずですradio[0]radio[1]radio[2]

それが役立つことを願っています。

于 2013-05-16T10:24:20.547 に答える
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 に答える
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

if(document.getElementById('element_id').checked)より良い結果を得るために使用します。

于 2013-05-16T10:11:49.860 に答える
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 に答える