如何改变单选按钮的文本

Question

我有一个单选按钮和两个选项("yourself"/"a colleague") .

在这种形式中，我添加了一个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"/>

，那么你可以使用:

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

Answer 2

你可以这样做，例如:

label能够改变单选按钮对应的文本。

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 map函数

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