jQuery 在单选按钮上应用 CSS 类
jquery applying css class on select on radio buttons
我有 3 个单选按钮。我需要做的是,当选择一个单选按钮时,我需要在文本后面应用我的 CSS 类名"行",就像
<span> <input type="radio" name="group1" value="Milk"> Milk </span>
我需要在牛奶上应用我的课程当用户选择其他单选按钮时,相同的类应用于其他单选按钮文本,但从前一个中删除类。
<style type="text/css">
.line{
text-decoration: line-through;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("input[type='radio']").change(function(){
if($(this).is(':checked'))
//i wana do this
$(this).addClass('line');
//if another is selected so do this
$(this).removeClass('line');
});
});
<div>
<span> <input type="radio" name="group1" value="Milk"> Milk </span> </br>
<span> <input type="radio" name="group1" value="Butter"> Butter </span> </br>
<span> <input type="radio" name="group1" value="Cheese"> Cheese </span> </br>
<hr>
</div>
由于您需要将类添加到span
,因此您可以使用parent
从单选按钮访问span
。要从其他 span
元素中删除该类,只需将其从所有有问题的类中删除,然后再将该类添加到刚刚选择的span
:
$("input[type='radio']").change(function() {
if(this.checked) {
$('span.line').removeClass('line');
$(this).parent().addClass('line');
}
});
这是一个工作示例。
请注意使用 this.checked
而不是您拥有的 jQuery 版本。尽可能使用本机 DOM 属性要快得多。
$("input[type='radio']").change(function() {
console.log(this.checked)
if (this.checked) {
// remove previously added line class
$('span.line').removeClass('line');
// you should add class to span, because text is
// within span tag, not in input
$(this).parent().addClass('line');
}
});
工作样品
相关文章:
- 将 CSS 应用于禁用的输入按钮
- 将Rails后端添加到JS/HTML/CSS应用程序时,正确的文件位置是什么
- 阻止Jquery对话框内容的CSS应用于主窗口
- 如果父宽度大于特定值,则css应用样式
- 如何防止用查询加载的css应用于整个页面
- 将CSS应用于正确放置的字母
- 将CSS应用于脚本
- Javascript/jQuery,将CSS应用于包含特定文本/html的元素
- 使用 JavaScript 将 CSS 应用于动态生成的单选按钮
- 将悬停时将 CSS 应用于多个组件
- 将 CSS 应用于不带 标记的整个页面
- 无法通过 Ajax 将 CSS 应用于表单输入
- 如何将CSS应用于除悬停元素之外的其他元素
- 使用jquery将css应用于所有id
- 将css应用于具有onclick事件的类
- 将CSS应用于动态生成的元素
- 安卓设备上的JavaScript/HTML/CSS应用程序-速度非常慢
- 仅将CSS应用于文本内容
- 使用JS CSS应用减去上边距
- 如何将css应用于所需页面