如何解决在选中时将边框添加到单选按钮的值边框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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。