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

Question

在选中“是的广播”按钮时，我想在“是”值中添加一个边框（不是概述）。我可以onchange在输入单选按钮上放置一个事件，但我无法为“是”值添加边框，因为没有标签。我如何使用 jquery/javascript 做到这一点？我试过了$("input:radio[name='registered'][value='yes']").css("border","3px solid red");但这甚至没有给复选框一个边框（只有当我更改为大纲时才有效），更不用说复选框的值了。有什么想法吗？理想情况下，HTML 文件将保持不变，所有更改都在 js 文件中进行。我看到的示例大多添加了 label 标签或 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>

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

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