选中的 addClass 和 toggleClass 上的 jQuery 复选框适用于所有 DIV，而不仅仅是包含 DIV

Question

I have a few Bootstrap Cards with a checkbox inside each of them that when they are checked I need 2 class´s for the specific Card DIVs to change..

1. class="card border-secondary" --> class="card border-success"
2. class="card-header" --> class="card-header text-white bg-success"

For this to work I have the following jQuery in the below snippet, but unfortunately it applies to the other DIVs aswell, and the toggle of border class somehow works, but not all the time:

How can I fix this so it only applies to the one div that the checkbox is inside, and get the toggle of border class to work all the time?

 $("input[type='checkbox']").change(function() { if ($(this).is(":checked")) { $("div.card-header").addClass("text-white bg-success"); $("div.border-secondary").toggleClass("border-success"); } else { $("div.card-header").removeClass("text-white bg-success"); $("div.border-secondary").toggleClass("border-success"); } });

 .checkbox.cr, .radio.cr { position: relative; display: inline-block; border: 1px solid #a9a9a9; border-radius: .25em; width: 1.3em; height: 1.3em; float: left; }.radio.cr { border-radius: 50%; }.checkbox.cr.cr-icon, .radio.cr.cr-icon { position: absolute; font-size: 1.2em; line-height: 0; top: 50%; left: -5%; color: #5cb85c; }.radio.cr.cr-icon { margin-left: 0.04em; }.checkbox label input[type="checkbox"], .radio label input[type="radio"] { display: none; }.checkbox label input[type="checkbox"]+.cr>.cr-icon, .radio label input[type="radio"]+.cr>.cr-icon { transform: scale(3) rotateZ(-20deg); opacity: 0; transition: all.3s ease-in; }.checkbox label input[type="checkbox"]:checked+.cr>.cr-icon, .radio label input[type="radio"]:checked+.cr>.cr-icon { transform: scale(1) rotateZ(0deg); opacity: 1; }.checkbox label input[type="checkbox"]:disabled+.cr, .radio label input[type="radio"]:disabled+.cr { opacity: .5; }

 <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet" /> <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <table cellpadding="6"> <tr style="border-bottom: 0px solid #FFFFFF;"> <td> <div class="card border-secondary" style="width: 130px;"> <div class="card-header" align="center">Checbox 1</div> <div class="card-body" align="center"> <div class="checkbox"> <label style="font-size: 2.5em"> <input type="checkbox" name="check1" id="check1" value=""> <span class="cr"><i class="cr-icon fa fa-check"></i></span> </label> </div> </div> </div> </td> <td> <div class="card border-secondary" style="width: 130px;"> <div class="card-header" align="center">Checbox 2</div> <div class="card-body" align="center"> <div class="checkbox"> <label style="font-size: 2.5em"> <input type="checkbox" value="" name="check2" id="check2"> <span class="cr"><i class="cr-icon fa fa-check"></i></span> </label> </div> </div> </div> </td> </tr> </table>

Answer 1

You need to be more specific, eg 'div.card-header' will select all of the card headers (as you know). Using 'closest' will traverse up the DOM tree and 'find' will traverse back down, selecting the correct header only.

Change the js to this:

$("input[type='checkbox']").change(function() {
  if ($(this).is(":checked")) {
    $(this).closest(".card").find(".card-header").addClass("text-white bg-success");
    $(this).closest(".card").toggleClass("border-success");
  } else {
    $(this).closest(".card").find(".card-header").removeClass("text-white bg-success");
    $(this).closest(".card").toggleClass("border-success");
  }
});

Working example: jsFiddle