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

Posted 2023-03-27

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

【英文标题】：How do I change the text on a checked radio button element while resetting the text of the other two?

【发布时间】：2021-10-26 22:03:30

【问题描述】：

我被卡住了，我有这个带有 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>

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

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 函数。但它不起作用。 如果我选择例如 radio12，则文本会相应更改，但是当我选择 radio11 或 radio13 时，文本保持不变。我不明白在这种情况下我应该做什么。我应该在这一点上使用普通按钮，在选择一个时，手动互相选择？

【参考方案1】：

您可以在 HTML 中添加<span> 以切换ON/OFF 文本。就像29 x 1 IS <span>OFF</span> 一样

也无需为每个输入复制/重复代码，您只能为所有输入使用一个 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>

【讨论】：

谢谢，如果我想做一些更复杂的事情，比如在检查时更改整个文本的背景颜色和边框，该怎么办？我尝试添加一些简单的东西，例如“ON”而不是“ON”，但文本显示标签而不是使其粗体。