![](/img/trans.png)
[英]How to add active class on the span next of the input (type=“ radio ”and checked =“checked ”)?
[英]On input type=radio checked, add a class to input=text
如何链接单选按钮和填充的文本输入,因此当选择单选时,输入文本区域中的文本也将更改为红色粗体?
我知道逻辑是:
选中radio-A和input-text-A时,将CSS类添加到input-text-A。 取消选中时,删除类。 如果选择单选-B,请更改输入文本-B,依此类推...
但是现在,简单脚本针对所有文本输入。
$('input[type=text]').addClass('red');
.red { color: red; font-weight: bold; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="form-inline"> <label class="" for=""> <input class="" type="radio" name="answer-Q1" value="option1"> A. </label> <input type="text" name="answers" class="" placeholder="" required> </div> <br> <div class="form-inline"> <label class=""> <input class="" type="radio" name="answer-Q2" value="option1"> B. </label> <input type="text" name="answers" class="" placeholder="" required> </div>
给出您的标记,实际上不需要添加任何类或使用javascript,您可以使用纯CSS来做您想做的事情:
input[type="radio"]:checked + input[type="text"] {
color: red;
font-weight: bold;
}
至于如何使用jQuery添加类,我倾向于编写“健壮”的解决方案,这些解决方案可能会更长一些,但是却不那么“脆弱”(意味着:如果标记稍有变化,脚本仍然可以工作)。 我写这个的方式-假设没有对标记的控制-将使用jQuery的最接近方法并查找以找到目标文本输入:
// no-conflict-save document ready shorthand
jQuery(function($) {
// bind to the "change" event of all inputs that are radio buttons
jQuery('input[type="radio"]').on('change', function() {
// find the text input
var $text_input = $(this).closest('div').find('input[type="text"]');
// if there isn't one, get out
if ( ! $text_input.length ) {
return;
}
// if the radio button is checked, add the class
if ($(this).is(':checked')) {
$text_input.addClass('red');
} else {
// otherwise, remove the class
$text_input.removeClass('red');
}
});
});
但是,如果我DID可以控制标记,则可以在无线电输入元素中添加一个类,并使用该类来使脚本更“一般”地有用,并缩小绑定输入的范围(还将允许该脚本在复选框+文本输入上也有效地工作):
// no-conflict-save document ready shorthand
jQuery(function($) {
// bind to the "change" event of any inputs with the "watch-change" class
jQuery('input.watch-change]').on('change', function() {
// find the text input. Note, this would find multiple text inputs if they existed.
var $text_input = $(this).closest('div').find('input[type="text"]');
// if there isn't a text input to work with, get out
if ( ! $text_input.length ) {
return;
}
// if the radio button is checked, add the class
if ($(this).is(':checked')) {
$text_input.addClass('red');
} else {
// otherwise, remove the class
$text_input.removeClass('red');
}
});
});
而且,老实说,通过更好地了解您的项目范围,可能可以编写更高效,可重复使用的脚本片段。
做这个:
$("input[type=radio]").on("change", function(e) {
if (e.currentTarget) {
e.currentTarget.next("input[type=text").addClass("red");
}
});
这是工作代码。
$('input:radio').click(function() { $('label:has(input:radio:checked)').addClass('rightAnswer'); $('label:has(input:radio:not(:checked))').removeClass('rightAnswer'); });
.container {margin:0 auto; margin-top:50px;} .rightAnswer {font-weight:bold; color:#2979FF;} .inputAnswers {width:200px;} .block {display:block;} input[type="radio"]:checked + input[type="text"] { color: #2979FF; font-weight: bold; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <label class="block" for="answer-Q1A"> <input type="radio" class="" name="answer-Q1" value="1"> A. <input type="text" name="answers" class="inputAnswers" id="answer-Q1A" placeholder="" required></label> <label class="block" for="answer-Q1A"> <input type="radio" class="" name="answer-Q1" value="1"> B. <input type="text" name="answers" class="inputAnswers" id="answer-Q1A" placeholder="" required></label> <label class="block" for="answer-Q1A"> <input type="radio" class="" name="answer-Q1" value="1"> C. <input type="text" name="answers" class="inputAnswers" id="answer-Q2A" placeholder="" required></label> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.