如何在重置其他两个文本的同时更改选中的单选按钮元素上的文本？

Question

我卡住了，我有一个包含 3 个元素的单选按钮

<p style="display:inline-block" id = "radio11l"><input id = "radio11" type="radio" name="delivery_option" value="29 x 1"  required />29 x 1</p>
<p style="display:inline-block" id = "radio12l"><input id = "radio12" type="radio" name="delivery_option" value="27 x 2"/>27 x 2</p>
<p style="display:inline-block" id = "radio13l"><input id = "radio13" type="radio" name="delivery_option" value="25 x 3" />25 x 3</p>

现在，我想做到这样，当我检查第一个时，它的文本会发生变化，而当我 select 第二个时，第一个文本会恢复到原来的状态，而第二个文本会发生变化。我试过这个

function labelChanger3(){
    if (jQuery('#radio11').prop("checked", true)){
        jQuery('#radio11l').html('<p style="display:inline-block" id = "radio11l"><input id = "radio11" type="radio" name="delivery_option" value="29 x 1" required />29 x 1 is ON</p>');
        jQuery('#radio12l').html('<p style="display:inline-block" id = "radio12l"><input id = "radio12" type="radio" name="delivery_option" value="27 x 2"/>27 x 2 is OFF</p>');
        jQuery('#radio13l').html('<p style="display:inline-block" id = "radio13l"><input id = "radio13" type="radio" name="delivery_option" value="25 x 3"/>25 x 3 is OFF</p>');

    }
}

jQuery("#radio11").change(function (){
    labelChanger3();
});

它适用于第一步。所以我为其他 2 个元素创建了相应的函数，radio12 和 radio13，以及它们各自的 .change 函数。但它不起作用。如果我 select 例如 radio12，文本会相应更改，但是当我转到 select radio11 或 radio13 时，文本保持不变。我不明白在这种情况下我应该做什么。我现在应该只使用普通按钮吗？select 当一个按钮被 selected 时，它们会手动相互取消 select 吗？

Answer 1

您可以将 <span> 添加到 HTML 以切换 ON/OFF 文本。就像 29 x 1 IS <span>OFF</span>
也不需要 duplicate/repeat 每个输入的代码你可以只对所有输入使用一个 change 处理程序

$(document).ready(function(){
  $('input[name="delivery_option"]').on('change' , function(){
    $(this).next('span').text(this.checked ? 'ON' : 'OFF');  // toggle on off
    $('input[name="delivery_option"]').not(this).next('span').text('OFF');  // OFF other inputs
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p style="display:inline-block" id = "radio11l"><input id = "radio11" type="radio" name="delivery_option" value="29 x 1"  required />29 x 1 IS <span>OFF</span></p>
<p style="display:inline-block" id = "radio12l"><input id = "radio12" type="radio" name="delivery_option" value="27 x 2"/>27 x 2 IS <span>OFF</span></p>
<p style="display:inline-block" id = "radio13l"><input id = "radio13" type="radio" name="delivery_option" value="25 x 3" />25 x 3 IS <span>OFF</span></p>

如何在重置其他两个文本的同时更改选中的单选按钮元素上的文本？

How do I change the text on a checked radio button element while resetting the text of the other two?

html

javascript

wordpress

jquery

radio