Question

基本上，当选中复选框时，如果取消选中，伴随的文本框背景颜色必须为绿色和红色。

<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 1

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

Answer 2

看一下附件摘录。

＆＃13;

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

＆＃13;

<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>

＆＃13;

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最初更改处理程序

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

如何在同一个div中选择另一个输入来更改其背景颜色？

4 个答案: