ラジオボタンのテキストを変更するにはどうすればよいですか？

Question

私はラジオボタンと2つの選択肢を持つフォームを持っています。

この形式では、翻訳のためにbuttonを追加しました。

ボタンをクリックすると、ラジオボタンのテントをフランス語("Vous-même"/"Un collegue")に変更します。

この変更を可能にするjQueryラインが必要です。

私はこれを試してみてください。

NWF $('#'+UserTypeID).find("input:checked").val("Vous-même");値ではなく、テキストを変更し 。この行が完全に

誰かが解決策を持っているラジオボタンを隠すため

NWF $('#'+UserTypeID).find("input:checked").text("Vous-même"); はエラーを生成しますか？

Answer 1

あなたがこのようなHTMLを使用している場合：

<label for="foo">Foo</label> 
<input type="radio" id="foo" name="type"/> 
<label for="bar">Bar</label> 
<input type="radio" id="bar" name="type"/> 

、あなたが使用してテキストを変更することができます。

labelをすることができるように：

NWF$('#'+UserTypeID).find('[for="foo"]').text("Vous-même"); 

Answer 2

あなたが使用して、たとえば、これを行うことができますラジオボタンに対応するテキストを変更します。

data各ボタンをクリックするごとに切り替える必要のあるデータを保存する属性。

$(document).ready(function(){ 
 
    $('.translate').click(function(){ 
 
    $('input[type=radio][name=person]').each(function(index) { 
 
     var current_element=$(this); 
 
     var done=false; 
 
     var traductions=[current_element.data('traduction-fr'),current_element.data('traduction-en')]; 
 
     var current_value=$("label[for='" +current_element.attr("id")+ "']").text(); 
 
     $.each(traductions, function(index, value) { 
 
      if(current_value!= value && !done){ 
 
       $("label[for='" + current_element.attr("id")+ "']").text(value); done=true; 
 
      } 
 
     }); 
 
    }); 
 
}); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<label for="option1">yourself</label> 
 
    <input type="radio" name="person" id="option1" value="person_1" data-traduction-fr="Vous-même" data-traduction-en="yourself"><br> 
 
    <label for="option2">a colleague</label> 
 
    <input type="radio" name="person" id="option2" value="person_2" data-traduction-fr="Un collegue" data-traduction-en="a colleague"><br> 
 
    <input type="button" value="Translate" class="translate">

Answer 3

あなたはjqueryのマップ機能に

<label for="option1" data-selected="en" data-en="yourself" data-fr="Vous-même">yourself</label> 
<input type="radio" name="person" id="option1"/> 

<label for="option2" data-selected="en" data-en="a colleague" data-fr="Un collegue">a colleague</label> 
<input type="radio" name="person" id="option2"/> 

を使用してそれを行うことができますが、入力して行くのラベルをする必要はありません以下のコード

var $labels = $("label[for]"); 
$('input').map(function(){ 
     var label = $labels.filter('[for="'+this.id+'"]'); 
     var lang =label.attr("data-selected"), 
      enText = label.attr("data-en"), 
      frText = label.attr("data-fr"); 
    if("en" == lang){ 
     label.text(frText); 
     label.attr("data-selected", "fr") 
    }else{ 
     label.text(euText); 
     label.attr("data-selected", "en")  
    } 
});