选中后为单选按钮的值添加边框（jquery/JS）答案

【问题标题】：Add border to value of radio button upon checked (jquery/JS)选中后为单选按钮的值添加边框（jquery/JS）
【发布时间】：2020-08-14 02:16:33
【问题描述】：

我想在选中“是”单选按钮时为“是”值添加边框（不是轮廓）。我可以在输入单选按钮上放置onchange 事件，但由于没有标签标签，我无法为“YES”值添加边框。我如何使用 jquery/javascript 做到这一点？

我试过了

$("input:radio[name='registered'][value='yes']").css("border","3px solid red");

但这甚至没有给复选框一个边框（只有在我更改为轮廓时才有效），更不用说复选框的值了。有什么想法吗？理想情况下，HTML 文件将保持不变，并且在 js 文件中进行所有更改。我看到的示例大多都添加了标签标签或 div，但这没有任何标签供我使用。我试过 .value.css() 但它无效。

<form name="input" method="get">
        <span>Registered:</span>
        <input type="radio" name="registered" value="yes">YES  
        <input type="radio" name="registered" value="no" checked disabled>NO
</form>

【问题讨论】：

将文本包装在像<span> 这样的元素中是最不痛苦的解决方案

标签： javascript jquery css css-selectors

【解决方案1】：

您在 YES 或 NO 文本中使用任何元素

$(document).ready(function() {
    $("input[type=radio]").click(function(e) {
       $(this).next("span").css("border","2px solid red");
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="input" method="get">
   <span>Registered:</span>
   <input type="radio" name="registered" value="yes">
   <span>YES</span> 
   <input type="radio" name="registered" value="no" checked disabled>
   <span>NO</span>
</form>

【讨论】：

【解决方案2】：

不需要javascript。您可以使用:checked 选择器。你也应该用 span 换行。

input[type="radio"]:checked:not(:disabled) + span{
  border: 2px solid red;
}

<form name="input" method="get">
  <span>Registered:</span>
  <input type="radio" name="registered" value="yes"><span>YES</span>
  <input type="radio" name="registered" value="no" checked disabled><span>NO</span>
</form>

【讨论】：