Изменить в соответствии с проверкой ввода

Question

Как я могу решить эту проблему: у меня много входов на странице.когда я нажимаю на вход и проверяю, он должен изменить цвет на метку в зависимости от него

$(document).ready(function() {
  $('label.boxextra').each(function() {
    $(this).click(function() {
      if ($("input[type='checkbox']").is(':checked')) {
        $('label.boxextra').css('background-color', 'red');
      } else {
        $('label.boxextra').css('background-color', '#fff');
      }
    });
  });
});

label.boxextra {
  background: #fff;
  border: 1px solid #D4D4D4;
  padding: 10px;
  color: #000000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="extra_0" style="display:inline; margin-right: 10px;" class="boxextra"><input type="checkbox" data-multiple="1" id="extra_0" name="extra[]" value="rosii"> rosii</label>

<label for="extra_1" style="display:inline; margin-right: 10px;" class="boxextra"><input type="checkbox" data-multiple="1" id="extra_1" name="extra[]" value="castraveti"> castraveti</label></td>

Answer 1

просто изменить

$("input[type='checkbox']").is(':checked') 

на

$("input", this).is(':checked') 

и

$('label.boxextra').css('background-color', 'red'); 

на

$(this).css('background-color', 'red');

$(document).ready(function() {
  $('label.boxextra').each(function() {
    $(this).click(function() {
      if ($("input", this).is(':checked')) {
        $(this).css('background-color', 'red');
      } else {
        $(this).css('background-color', '#fff');
      }
    });
  });
});

label.boxextra {
  background: #fff;
  border: 1px solid #D4D4D4;
  padding: 10px;
  color: #000000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="extra_0" style="display:inline; margin-right: 10px;" class="boxextra"><input type="checkbox" data-multiple="1" id="extra_0" name="extra[]" value="rosii"> rosii</label>

<label for="extra_1" style="display:inline; margin-right: 10px;" class="boxextra"><input type="checkbox" data-multiple="1" id="extra_1" name="extra[]" value="castraveti"> castraveti</label></td>

Answer 2

Ну, вы можете иметь событие щелчка для каждого флажка и использовать флажок id, чтобы соответственно изменить цвет правой метки (на основе метки for).

И наЗаметьте, в вашем исходном коде, зачем перебирать надписи и использовать $(this).click внутри цикла, когда $("label.boxextra").click - более быстрый способ сделать то же самое?

$(document).ready(function() {
  $("input[type='checkbox']").click(function() {
    //if it's checked assign 'color' to red, else white
    color = this.checked ? "red" : "#fff";
    $("label[for='" + this.id + "']").css("background-color", color);
  });
});

label.boxextra {
  background: #fff;
  border: 1px solid #D4D4D4;
  padding: 10px;
  color: #000000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="extra_0" style="display:inline; margin-right: 10px;" class="boxextra"><input type="checkbox" data-multiple="1" id="extra_0" name="extra[]" value="rosii"> rosii</label>

<label for="extra_1" style="display:inline; margin-right: 10px;" class="boxextra"><input type="checkbox" data-multiple="1" id="extra_1" name="extra[]" value="castraveti"> castraveti</label></td>

Answer 3

найти относительные элементы внутри, используя this привязанный к вашему слушателю

$(document).ready(function() {
  $('label.boxextra').each(function() {
    var label = $(this);
    label.click(function() {
      if (label.find("input[type='checkbox']").is(':checked')) {
        label.css('background-color', 'red');
      } else {
        label.css('background-color', '#fff');
      }
    });
  });
});

label.boxextra {
  background: #fff;
  border: 1px solid #D4D4D4;
  padding: 10px;
  color: #000000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="extra_0" style="display:inline; margin-right: 10px;" class="boxextra"><input type="checkbox" data-multiple="1" id="extra_0" name="extra[]" value="rosii"> rosii</label>

<label for="extra_1" style="display:inline; margin-right: 10px;" class="boxextra"><input type="checkbox" data-multiple="1" id="extra_1" name="extra[]" value="castraveti"> castraveti</label></td>

Answer 4

Установите код для считывания цвета с идентификатора этикетки:

$(document).ready(function() {
  $('label.boxextra').each(function() {
    $(this).click(function() {
      if (!$(this).find('input').is(':checked')) {
        $(this).find('input').prop('checked', true);
        $(this).css('background-color', $(this).find('input').attr('id'));
      } else {
        $(this).find('input').prop('checked', false);
        $(this).css('background-color', 'white');
      }
    });
  });
});

label.boxextra {
  background: #fff;
  border: 1px solid #D4D4D4;
  padding: 10px;
  color: #000000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<label for="extra_0" style="display:inline; margin-right: 10px;" class="boxextra">
  <input type="checkbox" data-multiple="1" id="red" name="extra" value="rosii"> 
  red
</label>

<label for="extra_1" style="display:inline; margin-right: 10px;" class="boxextra">
  <input type="checkbox" data-multiple="1" id="green" name="extra" value="castraveti"> 
  green
</label>

<label for="extra_1" style="display:inline; margin-right: 10px;" class="boxextra">
  <input type="checkbox" data-multiple="1" id="blue" name="extra" value="castraveti"> 
  blue
</label>