在检查输入type=radio时，向input=text添加一个类

Question

如何链接单选按钮和填充的文本输入，因此当选择收音机时，输入文本区域中的文本也将更改为：红-大胆？

我知道逻辑是：

当选中无线电-A和输入-文本-A时，向input A添加CSS类。未选中时，移除类。如果选择无线电-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>

​

Answer 1

给出您的标记，实际上不需要添加任何类或使用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');
        }
    });
});

但是，如果我确实控制了标记，我将向无线电输入元素添加一个类，并使用这两个类使脚本更“通用”有用，并缩小绑定输入的范围(这将允许相同的脚本有效地处理复选框+文本输入)：

// 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');
        }
    });
});

而且，老实说，如果您对项目范围有了更好的理解，就有可能编写一个更加高效、可重用的脚本片段。

Answer 2

这样做：

$("input[type=radio]").on("change", function(e) {
    if (e.currentTarget) {
        e.currentTarget.next("input[type=text").addClass("red");
    }
});

Answer 3

这是工作代码。

​

$('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>

​