Как выбрать другой вход в пределах одного и того же div, чтобы изменить его цвет фона?

Question

Answer 1

$('input:checkbox').on('change',function(){ 
    var answer = $(this).closest('div').find('input.answer'); 
    // change BG 
});

Answer 2

Взгляните прилагается фрагмент.

$(document).ready(function(){ 
 
     $('input[type="checkbox"]').click(function(){ 
 
      if($(this).prop("checked") == true){ 
 
       $(this).next().next(".answer").css('background-color','green'); 
 
       
 
      } 
 
      else if($(this).prop("checked") == false){ 
 
       $(this).next().next(".answer").css('background-color','red'); 
 
       
 
      } 
 
     }); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="col col-12"> 
 
    <input class="question" type="text" placeholder="Type question 1 here"> 
 
</div> 
 
<div class="col col-6"> 
 
    <input type="checkbox" name="answer_group[1][]" id="a1"> 
 
    <label for="a1"></label> 
 
    <input class="answer" type="text" placeholder="A"> 
 
</div> 
 
<div class="col col-6"> 
 
    <input type="checkbox" name="answer_group[1][]" id="a2"> 
 
    <label for="a2"></label> 
 
    <input class="answer" type="text" placeholder="B"> 
 
</div> 
 
<div class="col col-6"> 
 
    <input type="checkbox" name="answer_group[1][]" id="a3"> 
 
    <label for="a3"></label> 
 
    <input class="answer" type="text" placeholder="C"> 
 
</div> 
 
<div class="col col-6"> 
 
    <input type="checkbox" name="answer_group[1][]" id="a4"> 
 
    <label for="a4"></label> 
 
    <input class="answer" type="text" placeholder="D"> 
 
</div>

Answer 3

Добавьте этот код в блок сценария после секции ответов, или работать на документе нагрузки:

$('input[type="checkbox"]').click(function() { 
    var color = $(this).is(':checked') ? 'green' : 'red'; 
    var css = {}; 
    css['background'] = color; 
    var input = $(this).siblings('input.answer'); 
    input.css(css); 
});

Answer 4

Использование jQuery.nextAll()

Кроме того, не что вы могли бы хочу trigger смена обработчик изначально

$('input:checkbox').on('change', function() { 
 
    $(this).nextAll('input.answer').removeClass('red green').addClass(this.checked ? 'green' : 'red'); 
 
}).change();

.green { 
 
    background: green; 
 
} 
 
.red { 
 
    background: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<div class="col col-12"> 
 
    <input class="question" type="text" placeholder="Type question 1 here"> 
 
</div> 
 
<div class="col col-6"> 
 
    <input type="checkbox" name="answer_group[1][]" id="a1"> 
 
    <label for="a1"></label> 
 
    <input class="answer" type="text" placeholder="A"> 
 
</div> 
 
<div class="col col-6"> 
 
    <input type="checkbox" name="answer_group[1][]" id="a2"> 
 
    <label for="a2"></label> 
 
    <input class="answer" type="text" placeholder="B"> 
 
</div> 
 
<div class="col col-6"> 
 
    <input type="checkbox" name="answer_group[1][]" id="a3"> 
 
    <label for="a3"></label> 
 
    <input class="answer" type="text" placeholder="C"> 
 
</div> 
 
<div class="col col-6"> 
 
    <input type="checkbox" name="answer_group[1][]" id="a4"> 
 
    <label for="a4"></label> 
 
    <input class="answer" type="text" placeholder="D"> 
 
</div>

Как выбрать другой вход в пределах одного и того же div, чтобы изменить его цвет фона?

ответ

Смежные вопросы