jquery - 选中 CSS 时向复选框添加红色边框

Question

我有这个 HTML，我试图在单击复选框时向 IMG 添加一个 1px 纯红色边框。我已经添加了悬停事件，但我不知道如何在选中复选框时将边框设置为红色。

<div class="row ">
    <div class="col-md-5 col-md-offset-1 col-centered ">
        <input type="checkbox" id="piega1" class=" servizioSection2 " name="imgSection2" value="PiegaByWellaProfessionals">
        <label class="piega" for="piega1">
            <img src="img/piega1.png" for="piega1" alt="" class="img-responsive immaginePiega ">
        </label>
        <h1 class="immagineTitoloPiega">PIEGA BY WELLA PROFESSIONALS</h1>
    </div>
    <div class="col-md-5  col-centered piege">
        <input type="checkbox" id="piega2" name="imgSection2" class="piege servizioSection2" value="Piega By System Professionals">
        <label for="piega2" class="piega ">
            <img src="img/piega2.png" for="piega2" alt="" class="img-responsive immaginePiega">
        </label>
        <h1 class="immagineTitoloPiega">PIEGA BY SYSTEM PROFESSIONALS</h1>
    </div>
</div>

这是CSS

.immaginePiega {-webkit-filter: grayscale(100%);filter: grayscale(100%); border-radius: 45px 0 45px 0; border: 1px solid #cccccc}
.immaginePiega:hover{-webkit-filter: grayscale(0%);filter: grayscale(0%); border-radius: 45px 0 45px 0; border: 3px solid red}
.immaginePiega:active{border:10px solid red;}

Answer 1

您可以通过组合 :checked 和 + 选择器来实现，

input.servizioSection2:checked + label img {
  border:1px solid red;
}

DEMO