当我单击我的复选框时，如何更改我的卡的颜色？

wecizke3 于 2022-10-22 发布在 Java

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

当我点击复选框时，我想使用JS更改我的卡的颜色。我目前的问题是，我不知道如何在JS中引用这些元素。

<body>
    <div class="container">
        <div class ="card">
            <input type="checkbox" name="platform" value="ana" id="ana">
            <label for="ana">
                <div class="card-image">
                    <img src="./images/Ana.png" alt="Character">
                </div>

                <div class="card-body">
                    <img class="heroCardRole" src="./images/Support.svg">
                    <h2>Ana</h2>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Error laudantium sequi facere mollitia saepe.</p>
                </div>

            </label>
        </div>
</body>

JavaScript

来源：https://stackoverflow.com/questions/74158213/how-can-i-change-the-color-of-my-card-when-i-click-mycheckbox

5条答案

按热度按时间

6rvt4ljy1#

添加此JavaScript代码段：

const checkboxAna = document.querySelector("#ana")
const cardBodyAna = document.querySelector(".card-body")
const bgClassName = 'bg-yellow'
checkboxAna.addEventListener('click', () => {
    if(checkboxAna.checked) return cardBodyAna.classList.add(bgClassName)
    cardBodyAna.classList.remove(bgClassName) # bg-yellow
})

添加此CSS类：

.bg-yellow {
    background-color: yellow
}

赞(0）回复(0）举报 2022-10-22

0lvr5msh2#

要查看复选框状态的更改，我们可以添加一个onClick事件，例如：

<input type="checkbox" onclick="validate()" name="platform" value="ana" id="ana">

使用此代码，每当复选框发生更改时，我们都会运行validate函数。
要特别针对卡，我们将id="card"添加到卡中，然后可以使用document.getElementById('ana')来引用它并更改其颜色。

<div class ="card" id="card">

然后，每当复选框将状态更改为选中时，我们只需将包含我们想要的背景色的类添加到卡中。当它未选中时，我们将删除我们添加的类。

function validate() {
            if (document.getElementById('ana').checked) {
                document.getElementById('card').classList.add("red")
            } else {
                document.getElementById('card').classList.remove("red")
            }
        }

.red {background: red}

赞(0）回复(0）举报 2022-10-22

46qrfjad3#

const c = document.querySelector('.card');
function yellow(e) {
  e.target.parentNode.classList.toggle('yellow');
}
c.addEventListener('change', yellow, false);

.yellow {
  background-color: yellow;
}

<div class="container">
  <div class="card">
    <input type="checkbox" name="platform" value="ana" id="ana">
    <label for="ana">
         <div class="card-image">
            <img src="./images/Ana.png" alt="Character">
         </div>
         <div class="card-body">
            <img class="heroCardRole" src="./images/Support.svg">
            <h2>Ana</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Error laudantium sequi facere mollitia saepe.</p>
         </div>
      </label>
  </div>

const i = document.querySelector('#ana');
i.addEventListener('change', function() {
  if (i.checked) i.parentNode.style.backgroundColor = 'yellow'
  else i.parentNode.style.backgroundColor = 'unset';
});

<div class="container">
  <div class="card">
    <input type="checkbox" name="platform" value="ana" id="ana">
    <label for="ana">
                <div class="card-image">
                    <img src="./images/Ana.png" alt="Character">
                </div>

                <div class="card-body">
                    <img class="heroCardRole" src="./images/Support.svg">
                    <h2>Ana</h2>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Error laudantium sequi facere mollitia saepe.</p>
                </div>

            </label>
  </div>

document.querySelector('#ana').setAttribute('onchange', "this.parentNode.classList.toggle('yellow')");

.yellow {
  background-color: yellow;
}

<div class="container">
  <div class="card">
    <input type="checkbox" name="platform" value="ana" id="ana">
    <label for="ana">
         <div class="card-image">
            <img src="./images/Ana.png" alt="Character">
         </div>
         <div class="card-body">
            <img class="heroCardRole" src="./images/Support.svg">
            <h2>Ana</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Error laudantium sequi facere mollitia saepe.</p>
         </div>
      </label>
  </div>

赞(0）回复(0）举报 2022-10-22

vktxenjb4#

<body>
    <div class="container">
        <div class ="card">
            <input type="checkbox" name="platform" value="ana" id="ana" onchange="toggleBackgroundColor();">
            <label for="ana">
                <div class="card-image">
                    <img src="./images/Ana.png" alt="Character">
                </div>

                <div class="card-body">
                    <img class="heroCardRole" src="./images/Support.svg">
                    <h2>Ana</h2>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Error laudantium sequi facere mollitia saepe.</p>
                </div>

            </label>
        </div>
</body>

<script>
    let checkboxState = false;

    function toggleBackgroundColor(){
        let cardDiv = document.getElementsByClassName('card')[0];

        if(checkboxState){
            cardDiv.style.backgroundColor = 'red';
            checkboxState = false;
            return;
        }

        cardDiv.style.backgroundColor = 'green';
        checkboxState = true;

    }

</script>

赞(0）回复(0）举报 2022-10-22

velaa5lx5#

这是一个普通的JavaScript实现。

<!doctype html>
<head>
  <style>
    #card {
      display: block;
      height: 100px;
      width: 100px;
    }
  </style>
  <script>
    function updateColor(checked) {
      const card = document.getElementById("card");
      card.style.background = checked 
         ? "red"
         : "transparent";
    }
  </script>
</head>

<body>
  <div id="card">
    <input type="checkbox" name="platform" value="ana" id="ana" onchange="updateColor(checked)">
  </div>
</body>

赞(0）回复(0）举报 2022-10-22

我来回答

当我单击我的复选框时，如何更改我的卡的颜色？

5条答案

相关问题

热门标签

最新问答