选择“广播”按钮更改标签文本，选择新的广播按钮时，先前选择的广播按钮标签文本需要还原答案

【问题标题】：Selecting radio button changes label text, when selecting new radio button, previously selected radio button label text needs to revert选择“广播”按钮更改标签文本，选择新的广播按钮时，先前选择的广播按钮标签文本需要还原
【发布时间】：2018-06-12 00:00:56
【问题描述】：

我正在创建一个页面，人们可以在其中选择食谱的成分。

该页面分为 4 种不同的成分，其中 2 种成分组您只能选择一种成分，所以我认为使用单选按钮而不是复选框是有意义的，但是客户想要标签选择无线电输入时，从“+ 添加到配方”更改为“- 从配方中删除”。我可以使用下面的代码实现这一点，但是当他们在组中选择其他内容时，之前选择的单选输入标签需要恢复为“+ 添加到配方”。这就是我正在努力解决的问题。

感谢您的帮助。

$('input[name="s1-radio"]').on('change', function() {

	$(this).next().text(function(state, text){
   	   return text === '+ Add to recipe' ? '- Remove from recipe' : '+ Add to recipe';
        });
      
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<label class="rk_button_container">
  <input type="radio" name="s1-radio" class="rk_button_input" value="11" data-variation-id="1" />
	<span class="rk_button">+ Add to recipe</span>
</label>

<label class="rk_button_container">
  <input type="radio" name="s1-radio" class="rk_button_input" value="13" data-variation-id="2" />
	<span class="rk_button">+ Add to recipe</span>
</label>

<label class="rk_button_container">
  <input type="radio" name="s1-radio" class="rk_button_input" value="9" data-variation-id="3" />
	<span class="rk_button">+ Add to recipe</span>
</label>

【问题讨论】：

你的意思是这样的：jsfiddle.net/3421ch9m/1
这似乎与原作没有什么不同，不过谢谢。希望这会有所帮助：没有选择单选按钮。我选择了第一个单选按钮，文本更改为“- 从食谱中删除”，其他人仍然说“+ 添加到食谱”我选择第二个单选按钮，第一个单选按钮文本更改为“+ 添加到食谱”并且第二个单选按钮文本更改为“- 从配方中删除”

标签： jquery

【解决方案1】：

只需将您的 jquery 代码更改为：

$('input[name="s1-radio[]"]').on('change', function() {

$('.rk_button').text('- Remove from recipe' ? '+ Add to recipe' : '+ Add to recipe');
 $(this).next().text(function(state, text){
   return text === '+ Add to recipe' ? '- Remove from recipe' : '+ Add to recipe';
    });

});

【讨论】：