[英]jQuery to add CSS class to selected radio button
I am trying to add a CSS class to a radio button based on which radio button is selected. 我正在尝试根据选择的单选按钮将CSS类添加到单选按钮。
$("input[type=radio][name=align]").on('change', function() { var radVal = $("input[type=radio][name=align]").val(); if (radVal == 'center') { $(".tlt1").addClass('centerCssClass').change(); $(".tlt1").removeClass('topCssClass').change(); } else if (radVal == 'top') { $(".tlt1").addClass('topCssClass').change(); $(".tlt1").removeClass('centerCssClass').change(); } });
.centerCssClass { background-color: blue; } .topCssClass { background-color: red; } .tlt1 { float: left; height: 300px; width: 300px; background-color: orange; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="radio" name="align" value="center">Center<br> <input type="radio" name="align" value="top">Top<br> <div class="tlt1"></div>
You have two issues here. 你有两个问题。 Firstly the selector you're retrieving the value from is incorrect.
首先,您从中检索值的选择器是不正确的。 You should use the
this
reference to get the value from the clicked radio button. 您应该使用
this
引用从单击的单选按钮获取值。
Secondly you need to make the CSS classes more specific so that they override the original background-color
setting of .tlt1
. 其次,您需要使CSS类更具体,以便它们覆盖
.tlt1
的原始background-color
设置。 Try this: 试试这个:
var $tlt = $(".tlt1"); $("input[type=radio][name=align]").on('change', function() { var radVal = $(this).val(); if (radVal == 'center') { $tlt.addClass('centerCssClass').removeClass('topCssClass'); } else if (radVal == 'top') { $tlt.addClass('topCssClass').removeClass('centerCssClass') } });
.tlt1 { float: left; height: 300px; width: 300px; background-color: orange; } .tlt1.centerCssClass { background-color: blue; } .tlt1.topCssClass { background-color: red; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="radio" name="align" value="center">Center<br> <input type="radio" name="align" value="top">Top<br> <div class="tlt1"></div>
Note that you also don't need to trigger the change()
event on the div
elements as it's redundant. 请注意,您也不需要在
div
元素上触发change()
事件,因为它是冗余的。
because tlt1's background color can't be covered 因为tlt1的背景颜色无法覆盖
so you have to add !important
after centerCssClass,topCssClass css 所以你必须在centerCssClass,topCssClass css之后添加
!important
$("input[type=radio][name=align]").on('change', function() { var radVal = $(this).val(); var tlt1 = $("#tlt1"); if (radVal == 'center') { tlt1.addClass('centerCssClass').change(); tlt1.removeClass('topCssClass').change(); } else if (radVal == 'top') { tlt1.addClass('topCssClass').change(); tlt1.removeClass('centerCssClass').change(); } });
.centerCssClass { background-color: blue !important; } .topCssClass { background-color: red !important; } .tlt1 { float: left; height: 300px; width: 300px; background-color: orange; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="radio" name="align" value="center">Center<br> <input type="radio" name="align" value="top">Top<br> <div id='tlt1' class="tlt1"></div>
You need to use :checked
selector to get selected radio button value and slightly change the CSS class declaration to override the background-color
您需要使用
:checked
selector来获取所选的单选按钮值,并稍微更改CSS类声明以覆盖background-color
$("input[type=radio][name=align]").on('change', function() { var radVal = $("input[type=radio][name=align]:checked").val(); if (radVal == 'center') { $(".tlt1").addClass('centerCssClass').removeClass('topCssClass'); } else if (radVal == 'top') { $(".tlt1").addClass('topCssClass').removeClass('centerCssClass'); } });
.tlt1.centerCssClass { background-color: blue; } .tlt1.topCssClass { background-color: red; } .tlt1 { float: left; height: 300px; width: 300px; background-color: orange; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="radio" name="align" value="center">Center<br> <input type="radio" name="align" value="top">Top<br> <div class="tlt1">tlt1</div>
Your solution is correct , just inside change
event change var radVal = $("input[type=radio][name=align]").val();
您的解决方案是正确的 ,只是在
change
事件更改内部var radVal = $("input[type=radio][name=align]").val();
to var radVal = $(this).val();
to
var radVal = $(this).val();
Because right now you get value of first element that is an input
has attribute type='radio'
and name='align'
. 因为现在你获得的第一个元素的值是
input
其属性type='radio'
和name='align'
。 So first element in your case has value center, so it is always center. 因此,您案例中的第一个元素具有价值中心,因此它始终是中心。 And by using
$(this)
you get the element that was actually changed. 通过使用
$(this)
您可以获得实际更改的元素。
Also you do not have to trigger change()
event on your .tlt1
element. 此外,您不必在
.tlt1
元素上触发change()
事件。
Lastly in your css the value that is lower is more respected than the one higher. 最后在你的css中,较低的值比较高的值更受尊重。 That is why your background did not change.
这就是为什么你的背景没有改变的原因。 Because background for class
.tlt1
was more important than to class centerCssClass
. 因为类
.tlt1
背景比类centerCssClass
更重要。
Here is an working example 这是一个有效的例子
$("input[type=radio][name=align]").on('change', function () { var radVal = $(this).val(); if (radVal == 'center') { $(".tlt1").addClass('centerCssClass'); $(".tlt1").removeClass('topCssClass'); } else if (radVal == 'top') { $(".tlt1").addClass('topCssClass'); $(".tlt1").removeClass('centerCssClass'); } });
.tlt1 { float: left; height: 300px; width: 300px; background-color: orange; } .centerCssClass { background-color: blue; } .topCssClass { background-color: red; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="radio" name="align" value="center">Center<br> <input type="radio" name="align" value="top">Top<br> <div class="tlt1"></div>
try this 试试这个
use id
instead of class
tlt1
使用
id
代替class
tlt1
$("input[type=radio][name=align]").on('change', function() { var radVal = $(this).val(); if (radVal == "center") { $("#tlt1").removeClass('topCssClass').change(); $("#tlt1").addClass('centerCssClass').change(); $("#tlt1").removeClass('tlt1'); } else { $("#tlt1").removeClass('centerCssClass').change(); $("#tlt1").addClass('topCssClass').change(); $("#tlt1").removeClass('tlt1'); } });
.centerCssClass { float: left; height: 300px; width: 300px; background-color: blue; } .topCssClass { float: left; height: 300px; width: 300px; background-color: red; } .tlt1 { float: left; height: 300px; width: 300px; background-color: orange; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="radio" name="align" value="center">Center<br> <input type="radio" name="align" value="top">Top<br> <div class="tlt1" id="tlt1"></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.