html 当复选框被选中时，更改div的背景颜色

64jmpszr 于 2022-12-09 发布在其他

关注(0)|答案(5)|浏览(194)

我尝试做的是当复选框被选中时，改变div的背景颜色，而当它未被选中时，删除背景颜色。我如何使用jquery做到这一点呢？

<div class="checkbox-container">
    <input type="checkbox" class ="checkbox-border" id="personal-info-checkbox">
      <label for="personal-info-checkbox"> Mark as reviewed and acknowledged
      </label>
 </div>

使用parent selector和. removeclass我不知道如何使用jquery选择我的div并关闭和打开颜色。

Html

来源：https://stackoverflow.com/questions/74720108/when-checkbox-is-checked-change-background-color-of-div

5条答案

按热度按时间

bogh5gae1#

您不需要jQuery来完成此操作
您只能使用css来执行此操作。

.checkbox-container:has(input:checked) {
    background-color: red;
}

chromium、safari中支持:has伪类。
对于firefox，需要启用标志。了解更多信息，请访问mdn：:has pseudo class

赞(0）回复(0）举报 2022-12-09

cigdeys32#

将change事件侦听器添加到input，该侦听器根据是否选中来设置其最接近的父级div的背景颜色：
第一个

赞(0）回复(0）举报 2022-12-09

9q78igpj3#

"试试这个，希望对你有帮助"

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#personal-info-checkbox").click(function(){
    if($(this).is(":checked")){
        $(this).parent().addClass("color-blue");
    }else {
        $(this).parent().removeClass("color-blue");
    }
  });
});
</script>
<style>
 .checkbox-container
 {
     padding:20px;
 }
 .color-blue {
     background-color:blue;
 }

</style>
</head>
<body>

<div class="checkbox-container">
    <input type="checkbox" class ="checkbox-border" id="personal-info-checkbox">
      <label for="personal-info-checkbox"> Mark as reviewed and acknowledged
      </label>
 </div>

</body>
</html>

赞(0）回复(0）举报 2022-12-09

ergxz8rk4#

下面是一个示例，说明如何执行此操作
第一个

赞(0）回复(0）举报 2022-12-09

pbwdgjma5#

There are a number of ways to do this:

CSS (with limited, as of writing, browser support),
jQuery (among other libraries), and
native JavaScript.
The below example has explanatory comments in the code:

// using jQuery, we select the relevant element via its class, and use the on()
// method to bind the anonymous function as the event-handler for the 'change'
// event:
$('.checkbox-container.with-jQuery').on('change', function(){
  // here we find the <input> element descendant with find(), and then use the
  // is() method to test that element to see if it matches the :checked pseudo-
  // class; this returns a Boolean true/false which is cached in the 'checked'
  // variable:
    let checked = $(this).find('input').is(':checked');
  
  // here we use toggleClass() to toggle the 'checked' class-name on the element,
  // and use the 'checked' variable to ascertain whether the class should be
  // added/retained (if the Boolean is true) or removed/not-added (if the Boolean
  // is false):
    $(this).toggleClass('checked', checked);
});

// using JavaScript we use document.querySelector to retrieve the element
// with the listed classes; and use EventTarget.addEventListener() to bind the
// anonymous Arrow function as the event-handler for the 'change' event:
document.querySelector('.with-JavaScript.checkbox-container').addEventListener('change',(evt)=>{
  // we cache a reference to the current element (the <div>):
    let current = evt.currentTarget,
      // we find the <input> descendant, and access its checked property to
      // obtain a Boolean true (if checked) or false (if not-checked) and
      // store that Boolean in the 'checked' variable:
        checked = current.querySelector('input').checked;
  // here we use Element.classList.add() to add the 'active' class-name,
  // with the checked variable to determine if it should be added/retained
  // (if true) or removed/not-added (if false):
    current.classList.add('active', checked);
});

:root {
  --checkedColor: lime;
}

/* here we select the element via classes, and use :has()
   to check if it has a descendant element which matches
   the enclosed selector: */
.with-CSS.checkbox-container:has(input:checked) {
  /* if so, we set the --checkedColor custom property
     as the background-color of the element: */
  background-color: var(--checkedColor);
}

.with-jQuery.checkbox-container.checked {
  background-color: var(--checkedColor);
}

.with-JavaScript.checkbox-container.active {
  background-color: var(--checkedColor);
}

<!-- each wrapper <div> has a 'with-...' class applied in order to identify which
     approach is being taken: -->
<div class="checkbox-container with-CSS">
  <!-- an id must be unique, to that end - because there are three checkboxes in
       this example - the id has been modified, as has the corresponding <label>
       element's 'for' attribute: -->
  <input type="checkbox" class="checkbox-border" id="personal-info-checkbox1">
  <label for="personal-info-checkbox1"> Mark as reviewed and acknowledged
  </label>
</div>

<div class="checkbox-container with-jQuery">
  <input type="checkbox" class="checkbox-border" id="personal-info-checkbox2">
  <label for="personal-info-checkbox2"> Mark as reviewed and acknowledged
  </label>
</div>

<div class="checkbox-container with-JavaScript">
  <input type="checkbox" class="checkbox-border" id="personal-info-checkbox3">
  <label for="personal-info-checkbox3"> Mark as reviewed and acknowledged
  </label>
</div>

References:

赞(0）回复(0）举报 2022-12-09

我来回答

html 当复选框被选中时，更改div的背景颜色

5条答案

相关问题

热门标签

最新问答