选择单选按钮会更改标签文本，当选择新的单选按钮时，先前选择的单选按钮标签文本需要还原

Question

I'm creating a page where people can choose ingredients for a recipe.

The page is split into 4 different kinds of ingredients, 2 of these ingredient groups you can only choose 1 ingredient of it's kind, so I thought it would make sense to use radio buttons rather than checkboxes, however the client wants the label to change from '+ Add to recipe' to '- Remove from recipe' when a radio input is selected. I can make that happen with the below code, but when they select something else in the group, the previously selected radio input label needs to revert to '+ Add to recipe'. That's what I'm struggling with.

Appreciate the help.

 $('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> 

Answer 1

Just change your jquery code to this:

$('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';
    });

});