在选中时将边框添加到单选按钮的值边框jquery / JS

问题描述

我想在选中“是”单选按钮时在“是”值上添加边框（非轮廓线）。我可以在输入单选按钮上放置一个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>

解决方法

不需要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>

,

您可以使用 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>