Question

我正在创建一个页面，供人们选择食谱配料。

页面分为4种不同的成分，其中2种成分组只能选择1种成分，所以我认为使用单选按钮而不是复选框是有意义的，但是客户希望标签从＆＃39; +添加到配方＆＃39;到＆＃39; - 从食谱中删除＆＃39;选择无线电输入时。我可以使用下面的代码实现这一点，但是当他们在组中选择其他内容时，先前选择的无线电输入标签需要恢复为“+添加到配方”。这就是我所挣扎的。

感谢帮助。

＆＃13;

$('input[name="s1-radio"]').on('change', function() {

	$(this).next().text(function(state, text){
   	   return text === '+ Add to recipe' ? '- Remove from recipe' : '+ Add to recipe';
        });
      
});

＆＃13;

<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>

＆＃13;

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

});

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

1 个答案: