时间戳

首页 > 解决方案 > Change according to input check

javascript - Change according to input check

问题描述

How can i solve this problem: i have many inputs on the page. when I click on an input and it is check it has to change the color to the label depending on it

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

标签： javascriptjquery

解决方案

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>

推荐阅读