2016-04-10 14 views
2

ラジオボタンがチェックされている場合に限り、見出しで表示されるテキストを変更します。input type="radio"を使用していますので、CSSを使用してスタイルを設定できます。これは私のコードは次のようになります。ボタンをチェックしたときにラベルのテキストを変更するにはどうすればよいですか?

<h1>What is your favourite class?</h1> 
 

 
<div> 
 
    <input type="radio" name="radio" id="radio1" class="radio" /> 
 
    <label for="radio1" style="color:black;font-family:impact;text-align:center;" id='1'>Maths</label> 
 
</div>

答えて

1

あなたはこのコードを試すことができます。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $('input[type=radio]').change(function() { 
      $('h1').text('Enter you new text'); 
     }); 
    }); 

</script> 

.changeは、ラジオボタンの状態の変化を検出します。

DEMO

+0

デモでは完全に動作しますが、私はJSコードをコピーするときに何もしません。 – VladJ

+0

@VladJには、コードにjquery.min.jsファイルが含まれています。 –

+0

私は自分のコードでscriptタグを使用しています。まだそのファイルを含める必要がありますか? – VladJ

1

あなたのラベルにIDを追加し、このラベルのinnerHTMLプロパティを変更するにはJavascriptを使用します。

getElementById("label").innerHTML = "new Text here" 
+0

ラベルのIDは、ID = '1' である思考過程{

document.getElementById("radio").innerHTML = "Change text to this"; 

}を通してワーキング。 – VladJ

+0

sry did not saw this –

1

可能な解決策は以下のとおりです。

// on document ready 
 
$(function() { 
 
    // when the radio changes 
 
    $(':radio.radio').on('change', function(e) { 
 
    // set text of h1 element 
 
    $('h1').text('mmmmm'); 
 
    }); 
 
});
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script> 
 

 

 
<h1>What is your favourite class?</h1> 
 

 
<div> 
 
    <input type="radio" name="radio" id="radio1" class="radio"/> 
 
    <label for="radio1" style="color:black;font-family:impact;text-align:center;" id='1'>Maths</label> 
 
</div>

+0

ありがとうございますが、動作していないようです。 – VladJ

0

誰かがラジオボタンをクリックしたときに検出するには、.changeを使用する必要があります。

$('input[type=radio][name=radio]').change(function() { 
    $(".header").text("New text"); 
}); 
+1

リンク先を関連コードまたはコンテンツサマリーに置き換えてください。それぞれの投稿は、サイトを離れたり、別の投稿に行く必要がなく、答えを理解するために自己完結型である必要があります。 [ヘルプ/応答](http://stackoverflow.com/help/answering)を参照してください – Tushar

0

見出しのテキストが変更される、チェックボックスのためonchange属性を使用して変更関数を呼び出します。

このソリューションにはJavaScriptのみが必要ですが、jQueryは必要ありません。

HTML onchange属性を使用しない場合は、JavaScriptにeventListenerを使用できます。

function change() { 
 
    document.getElementsByTagName("h1")[0].textContent="Changed"; 
 
}
<h1>What is your favourite class?</h1> 
 

 
<div> 
 
    <input type="radio" name="radio" id="radio1" class="radio" onchange="change()"/> 
 
    <label for="radio1" style="color:black;font-family:impact;text-align:center;" id='1'>Maths</label> 
 
</div>

0

ラジオボタンが選択されている場合は最初のチェック。表示されている場合は、label要素のinnerHTMLプロパティを変更します。

if (document.getElementById('radio1').checked) document.getElementById('1').innerHTML = "Text to insert"; 
0

私はちょっとだけjsが必要だと思います。

document.getElementById( "radio")。innerHTML = "これにテキストを変更します。

OR

たぶん、あなたは、if文、

VARラジオを試すことができます。

//ラジオボタンがクリックされた場合(.onclick = true)//このアクション/ステートメントの正しいコードはわかりません...可能かどうかわかりません。ちょうど

<h1>What is your favourite class?</h1> 
 

 
<div> 
 
    <input type="radio" name="radio" id="radio1" class="radio" /> 
 
    <label for="radio1" style="color:black;font-family:impact;text-align:center;" id='1'>Maths</label> 
 
</div>

関連する問題